Archived topic
Image swap on hover using sections or headers
9 replies · Started by Elle on October 22, 2017
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!
Hi there,
Can you link me to the site so I can see what you have so far? Thanks!
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!
The image itself isn't wide enough.
You can force it to be like this:
.banner-home,
.banner-home:hover {
background-size: 100% auto;
}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!
Try removing this from your banner-home class: display: inline-block;
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
!important to the background-size value?
Shouldn't be an issue - glad you got it working :)
Hi, yes I put !important for the background-size value.
Thanks! :)
No problem :)
