zoom in on hover effect for images

a showit collection

Read the lastest

Hover

business coaching

Hover

products & resources 

Hover

Use this space here to do an about me section. Do a sub header followed by a subheading to break up the content to make it easier for the reader. 

Then use this paragraph space to fill in the information for what you want the reader to know. Adding in this spinning effect and on hover effect will keep the reader active and on the site. 


Any and all on hover effects will not work on mobile so keep that in mind.

Put any image on an angle and it will spin! 

call to action or words

call to action or words

This action will only apply one time. Then the image will go back to a 0 degree  placement. 

HOVER TO SPIN

Magnetic Messaging Guide

Write copy that connects, converts, and sounds like you — without second-guessing every word.

Aligned CEO Workbook

A step-by-step workbook to help you map your next-level business vision, offers, and mindset — all in one place.

Side by SIDE on Hover Effect

 MAKE SURE IMAGES ARE NOT TOUCHING

This is an on hover overlay effect where you can add images in the background that hover and have words like this appear over top.

Aligned work creates success.

CEO energy, every damn day.

Make strategy feel soulful.

Small steps, big impact

Dream big. Start now.

Your vision, fully backed

Build boldly. Lead with heart.

On hover effect scroll with words

ABOUT Image locking

locking image example

This effect and the code do work when the images are locked in Showit, but it does not render the hover only effect, instead the image will pop in place first. Normally I would not recommend going outside the grid lines in Showit, However for this effect if you want fuller bigger images that truly only zooms in on hover then, going outside the grid is fine. I would however recommend that you do not add any words outside the grid and test your design.

Locking to the EDGE on hover effect will make the images jump in like below. 

No locking image example

Spinning on Hover and zoom in on hover combined.

Text behind the Image

Text on the Top

You can still add text on the image or behind the image - and use the Showit built in on hover effect at the same time!

You can adjust the speed of the zoom in the code by editing this line- transition: transform 1.5s ease;