Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="welcome-gender"> 
            <input class="male" name="gender" type="radio" value="male" id="male-one">
        <label for="male-one">Male One</label>  
        
        
            <input class="female" name="gender" type="radio" value="female" id="female-one">
        <label for="female-one">Female One</label>
        </div>
</body>
</html>
 
input[type="radio"]{
    display: none;
}
label {
    position: relative;
    width: 170px;
    height: 300px;
    display: inline-block;
    color: white;
    font-size: 0;
    border-radius: 4px;
}
.male + label {
    background: url(http://socialavatarnetworkscript.com/media/img/male_avatar.png);    
}
.female + label {
    background: url(http://socialavatarnetworkscript.com/media/img/female_avatar.png)
}
​
input + label:after {
    background: #FFF;
    content: '';    
}
input:checked + label:after {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    width: 170px;
    height: 300px;
    display: block;
    content: 'SELECTED';
    border-radius: 4px;
    color: white;
    font-family: titillium, sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    line-height: 300px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
​
​
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
misterManSampro
0viewers