How to achieve this effect?

[bolton]

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

[Gandalf]

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.

[coothead]

Hi there bolton,

here you go…

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

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

coothead

[PaulOB]

@coothead

here you go…

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

[bolton]

Lovely, perfect - thankyou!!

[coothead]

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

[coothead]

Hi there @bolton,

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

coothead

[PaulOB]

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.

[ladans37]

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