search

ve12sus / threeway

Custom Squarespace template
0 stars 0 forks source link

Rollover Zooming in on images #57

Open dansprout opened 6 years ago

dansprout commented 6 years ago

Client would like to add zooming effect when rolling over images on Ads and the 4 colored category blocks.

Don't worry about the HTML elements like copy and buttons, we just need to zoom the background image.

See effect here: (on the bottom of the screen of skyline) https://css-tricks.com/zooming-background-images/

You might be able to do this with CSS and just slow down the transition to make it a slow zoom effect.

ve12sus commented 6 years ago

This is done on the 4 category blocks.

Having trouble implementing same css to the ads because the ads use background-image instead of an element. Figuring it out now.

ve12sus commented 6 years ago

Figured out how to do it on the ad elements without changing it too much. Used ::before pseudo elements and put background-image on them.

Anyway the ads zoom in now.

dansprout commented 6 years ago

can we slow the zoom down by double.

ve12sus commented 6 years ago

Changed zoom from 0.3 to 0.6