How to achieve this effect?

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.

2 Likes

Hi there bolton,

here you go…

Full Page View:-
https://codepen.io/coothead/full/BaQKzoe

Editor View:-
https://codepen.io/coothead/pen/BaQKzoe

coothead

3 Likes

Nice demo but you will need background-size:cover on the images or this happens :slight_smile:

1 Like

Lovely, perfect - thankyou!!

Hi there Paul,

thanks for that info. :winky:

I forgot that there are screens a lot wider than mine. :wonky:

Using cover , though, created unpleasant vertical
image movement so I opted instead to use max-width
for the container.

coothead

1 Like

Hi there @bolton,

note that I have edited the codepen
following @PaulOB’s observations.

coothead

1 Like

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.:slight_smile:

1 Like

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 :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.