Pseudo Class :target

just me messing around with some cool css3 magic

by individual11

HTML

<a href="#test1">Yes</a>
<a href="#test2">No</a>
<div class="response">
    <div id="test1" class="hidden">I thought you'd see it my way.</div>
    <div id="test2" class="hidden">Ok. Maybe next time.</div>
</div>

CSS

body{
    background-color:#2b2b29;
    font-family:"Helvetica", Arial, sans;
    font-size: 18px;
}
a{
    padding:2px 7px;
    background-color:#7bcaf7;
    text-decoration:none; 
    color:#323232;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
a:hover{
    background-color:#94d3f7;   
}
.hidden{
    color:#FFF;
    position:absolute;
    float:left;
    margin-top:20px;
    opacity:0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
div[id]:target{
    opacity:1;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

JavaScript

/* NO JAVASCRIPT HERE, CHECK THE CSS! */