Add second background-image on hover

Question

I'm using my featured image as a background image on a div and I would like to add a second background-image to that same div on hover (I need them both because I want to blend them). Any suggestions?

I was able to achieve that using regular html and css, but now that I'm using the featured image as the background, I can't figure it out. Any suggestions?

Answer 1

Use a single element, with a pseudo element (:before) for the featured image, and appropriate hover styling to set its opacity and reveal a blend with the underlying second image. I threw in a gradual image transition just to make it look a little nicer.

html:

<div class="my-image-holder">
    text and other contents we don't want affected by opacity
</div>

css:

.my-image-holder {
    position: relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:30px;
    background-image: url('//some-url-to-second-image');
    background-size: contain;
    font-size: 1.2em;
    color: white;
}

.my-image-holder:before {
    z-index:-1;
    position:absolute;
    width:200px;
    height:200px;
    left:0;
    top:0;
    content: url('//some-url-to-featured-image');
    opacity:1.0;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.my-image-holder:hover:before {
    opacity:0.5;
}

Example JSFiddle

Answer 2

If you want something to happen when you 'hover', you can do that with some CSS. Assign a id (since they need to be unique, so your CSS will only affect the div with that id) of some name to the image tag, then use this as a starting point: https://www.w3schools.com/howto/howto_css_image_overlay.asp

You could also use some JS to change things. But CSS will work. The above link will give you some ideas.

You might also be interested in this question https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html , which does something similar to what you want with this code:

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

The first CSS will set a background image for that div, and the second will change the background image on a hover. The first link also has references to some transition stuff, so you can fade-in/fade-out.

Answer 3

You can assign multiple background images to the same div.

#sample-div {
    background-image: url(/folder/image.jpg);
}
#sample-div:hover {
    background-image: url(/folder/image.jpg), url(/folder/image2.jpg);
}

Each image can be separately assigned size, position, and other properties. See basics here: https://www.w3schools.com/css/css3_backgrounds.asp. However, you may need pseudo-elements or absolute positioning of "regular" images, and so on, if you want to achieve smooth transitions, as mentioned in the other answers.

Answer 4

Thank you guys! I actually figured it out and it was pretty easy. I just added both background images and changed the background-blend-mode from normal to multiply on hover.