HELP PLEASE: Debut Theme | Zoom or Parallax Effect on Hover

Highlighted
New Member
1 0 0

Hey!

I've been tinkering and searching most of the day to no avail, can anyone help me with writing or finding a code for a simple zoom/parallax effect with a colour overlay to activate whenever the cursor hovers over a gallery image on the home page or in general? If the colour overlay is too much I'll thankfully settle for just the zoom/parallax.

I've written one off the dome (see below) but it doesn't ease in and out as smoothly and I can't figure out how to make the overlay text hidden until you actually hover over the image(s)

.image-bar__link:hover .image-bar__item
{ opacity: 100; transform: scale(1.2); transition: all 0.2s ease-in-out; }

Examples of the effect:
https://w3bits.com/labs/css-image-hover-zoom/
https://mountainside-wines.myshopify.com/

 

0 Likes