CODEWITHSUNDEEP
htmlcssimage
Brad Roberts
Brad Roberts

Reputation: 3

On Image hover, show image on top with lower opacity

I'm looking to have an image which when I hover it another image appears on top of it, but with a lower opacity, allowing the user to still be able to see the image behind it with this translucent image above it. 

  <div id="wrapper"></div>

<style>
    #wrapper {
              width: 250px;
              height: 200px;
              background:url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
}

#wrapper:hover {
              background:url(https://38.media.tumblr.com/tumblr_me1u8vETNC1rfliwho1_500.gif) 0 0 no-repeat;
              opacity: .5;
}

</style>

this currently works, but I am not getting the opacity on the image which is displayed on hover.

Upvotes: 0

Views: 198

Answers (2)

Zallen
Zallen

Reputation: 126

like @nickspiel said, you are replacing the background image with a new one. It makes more sense to have two images in the same div and change the opacity on hover. Like so:

<div class="container">
  <img class="back" src="sample.jpg"/>
  <img class="front" src="sample2.jpg"/>
</div>

in the html and in the css:

.container {
  position: relative;
}
.back, .front {
  width: 400px;
  position: absolute;
}
.front{
  opacity: 0;
}
.container:hover .front {
  opacity: 0.5;
}

Check out the Fiddle here

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

If you need both to be visible on hover, you can blend them this way:

Fiddle

#wrapper {
    width: 250px;
    height: 200px;
    background:url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
}
#wrapper:hover {
    background:url(https://38.media.tumblr.com/tumblr_me1u8vETNC1rfliwho1_500.gif),url(https://33.media.tumblr.com/156ec9175fddca3df21443f7fd3bea28/tumblr_mjj09ad3NM1rmlyrqo1_1280.png) 0 0 no-repeat;
    background-blend-mode: multiply;
}

Upvotes: 1

Related Questions