CODEWITHSUNDEEP
javascriptcss
user6322822
user6322822

Reputation:

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>

Upvotes: 0

Views: 174

Answers (5)

Jack jdeoel
Jack jdeoel

Reputation: 4584

Use position absolute for hover image 

.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;
      display: none;
      position: absolute;
      top : 0;
      left: 0;
}
  img:hover ~ .hover {
  display:block;
}

Upvotes: 0

Thomas Lebricon
Thomas Lebricon

Reputation: 84

You can do this with CSS

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

.hover{
   ...
   display:none;
   position:absolute;
   top:0;
   left:0;
}
img:hover .hover {
   display:block;
}

Upvotes: 0

Tschallacka
Tschallacka

Reputation: 28722

I'd wrap it in a containing div(hoverwrap) that's relatively positioned. It just needs the attribute, so the child element that are positioned absolute will take that as an anchor instead of the document.

Then set your width parameter on the wrapper, and have the child elements width 100% so it will always fill up the size of the wrapper.

Then have the image hide by default, and only show on hover.(done with the display:none value and display:inline-block

.hover {
  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
  background-size: contain;
  opacity: 0.7;
}
.hoverwrap {
  position: relative;
}
.hoverwrap img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.hoverwrap .hover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
.hoverwrap:hover .hover {
  display: inline-block;
}
<div class="hoverwrap" style="width:75px;height:75px">

  <img src="http://i.imgur.com/QQzdPIF.jpg" />

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

</div>

Upvotes: 0

Aminur Rashid
Aminur Rashid

Reputation: 57

Try like this

 .hover:hover {
     opacity:1;
  }

Upvotes: 1

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

<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/

Upvotes: 2

Related Questions