[Resolved] Image swap on hover using sections or headers

[Elle]

Hi,

I am trying to create an image hover effect in sections; the banner should be full width and go from a black and white version of the image to a color one. I got the hover effect to work by assigning a custom class to the section, but it will not show up as full width. Here is the css I used:

.banner {
width: 100%;
background: url(“/imageBW.jpg”) no-repeat;
display: inline-block;
}
.banner:hover {
background: url(“/image.jpg”) no-repeat;
}

Is there anyway to create an hover effect either in headers or sections?

Thanks!

[Leo]

Hi there,

Can you link me to the site so I can see what you have so far? Thanks!

[Elle]

Hello,

The top image is a banner using a section with a background image, the bottom image has the hover effect. If you have a large screen and expand the window, the won’t expand the full width.

https://dev.schoolofimages.com/home-page-test/

Any insight? Thanks!

[Tom]

The image itself isn’t wide enough.

You can force it to be like this:

.banner-home,
.banner-home:hover {
    background-size: 100% auto;
}

[Elle]

Hi,

Thanks for such a quick reply. Unfortunately that doesn’t seem to work, now the image is even smaller. Maybe I am missing something?

Thanks!

[Tom]

Try removing this from your banner-home class: display: inline-block;

[Elle]

Hi,

Unfortunately that didn’t work either. I added !important and that did the trick. I am not sure if that is the best solution, but it did resolve it. Thanks for all your help and great theme!

Cheers

[Tom]

!important to the background-size value?

Shouldn’t be an issue – glad you got it working 🙂

[Elle]

Hi, yes I put !important for the background-size value.

Thanks! 🙂

[Tom]

No problem 🙂

[Author]

Posts