Archived topic
zoom section background image
3 replies · Started by Drew on September 24, 2020
I thought this would be relatively straightforward but I may be missing something. I'm trying to get a zoom effect on hover for just the background image inside a section.
I can't seem to find where to apply the CSS to just the image, rather, it can only be applied to the entire section.
What am I missing?
Hi Drew,
It seems like you're applying the css transition on the container.
You can try this out instead.
.generate-sections-container {
-moz-transition: all .5s;
-webkit-transition: all .8s;
transition: all .8s;
background-position: center center;
background-size: 100%;
}
.generate-sections-container:hover {
-webkit-background-size: 120%;
-moz-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
}This will apply to the backgrounds of all sections. If you want it to apply on a specific section only, just add its ID selector before .generate-sections-container class selector.
Let us know if it works for you.
There we go, thank you so much!
No problem. We're always glad to be of any help.
Cheers.:)
