Lewis Day Lewis Day - 5 months ago 27
CSS Question

on image hover display div over image

What I'm trying to achieve is on hover over the image, display the hover div over the image; I created this JsFiddle but I don't exactly know how to achieve what I'm trying to do.



.hover {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
height:75px;
width:75px;
background-size: contain;
opacity:0.7;
}

<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>

<div class="hover"></div>




Answer
<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>

.img:hover #hover{
  display:block;
}

    #hover {
                background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
                height:75px;
                width:75px;
          background-size: contain;
          opacity:0.7;
          position:absolute;
          left:0;
          top:0;
          display:none;
    }

Working fiddle https://jsfiddle.net/kcdued0s/3/