Why is css3 :target not working? - html

Question

I have a div and I want that on click an other div slides in. I want to achieve this with css3 :target.
Like you can see in the code snippet the :hover works. When hovered an animation start to fade some info in. When you click on the image I want that an other div fades in on the top by calling the same animations as used on hover.
Can somebody help with getting the :target working?
body{
margin: 0px;
}
.image{
position: relative;
width:300px;
height:auto;
}
.image img{
width:100%;
}
.download{
position: absolute;
top:0px;
left:0px;
height:80%;
width:100%;
background-color: gray;
display:none;
}
.info{
position: absolute;
bottom:0px;
left:0px;
height:20%;
width:100%;
background-color: green;
opacity: 0;
}
.info p{
padding: 5px;
margin: 0px;
}
.image:hover .info{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
.image:target .download{
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera */
animation: show 0.5s;
opacity: 1;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
/* Standard syntax */
#keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="image"><!-- I detect everything on this div-->
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg">
<div class="download"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</div>

Answer 1

This can be achieved via jquery: http://jsfiddle.net/swm53ran/13/
$('.image').on('click', function(){
$(this).find('.download').fadeIn(500);
});
i know you want to achieve this with :target, but you can do both animations through jquery to keep consistent if you would like. just another option...

Answer 2

i think i got it the way you wanted with css:
added anchor tag surrounding image, added id #dl to download div...heres the fiddle http://jsfiddle.net/swm53ran/14/
:target {
display:block;
-webkit-animation: show 0.5s; /* Chrome, Safari, Opera*/
animation: show 0.5s;
opacity: 1;
}
<div class="image"><!-- I detect everything on this div-->
<a href="#dl">
<img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg"/>
<div class="download" id="dl"><!-- this div should fade in on click (:target)-->
download
</div>
<div class="info"> <!-- this div should fade in on hover-->
<p>Image 1</p>
</div>
</a>
</div>