How can I replicate the effect on this page where the user rolls over the 2 main images and they increase on hover. Perhaps a jquery plugin or something?
https://www.winchester-white.co.uk/
Thanks
How can I replicate the effect on this page where the user rolls over the 2 main images and they increase on hover. Perhaps a jquery plugin or something?
https://www.winchester-white.co.uk/
Thanks
No JS, jQuery or plugins needed. Just a bit of CSS.
Something like this.
I know it’s not exactly the effect you’re after, but I’m sure you can work out how to change it.
Hi there bolton,
here you go…
Full Page View:-
https://codepen.io/coothead/full/BaQKzoe
Editor View:-
https://codepen.io/coothead/pen/BaQKzoe
coothead
Lovely, perfect - thankyou!!
Hi there Paul,
thanks for that info.
I forgot that there are screens a lot wider than mine.
Using cover , though, created unpleasant vertical
image movement so I opted instead to use max-width
for the container.
coothead
A minor addition perhaps in that I notice that the original demo had a fade effect where one side darkens as the other lightens when hovered. This can be incorporated into the fine demo by @coothead with the following code.
#container div{position:relative;}
#container div:before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,.2);
transition:.5s ease-in-out;
}
#container:hover div:before{background:rgba(0,0,0,.5);}
#container:hover div:hover:before{background:rgba(0,0,0,0);}
You may prefer it without the effect or perhaps reduce the opacity in the rgba value.
I was gonna say maybe using the :active state is the right tool for this, but when I looked at the Pen, it seems different than what I had in mind
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.