Streaming live at 10am (PST)

How to replicate an effect seen in the CMS tutorial?


#1

In the CMS tutorial, the thumbnail images for the blog posts had a scale effect when hovered over, but only a defined area of the image was shown (i.e. the image expands, but as though you were looking through a window at it; the window does not change size) . When I add a scale effect to my images, the image expands without limitations on how much is "visible." I tried adding a transparent border to it, but the border resizes my image again, as though my scale effect doesn't exist.

Does anyone know how to make images move like they do in that tutorial?


Instructions for Creating the Hover Effects Used for the Escape Template Blog Page
#2

You'll need to put the image inside of a div.

Say your image is 200x200, but you want it to zoom to 250x250. Create a dev called img-container, and set it to be 200x200, but also set the overflow to hidden:

Now, place your image inside of that div, and give it another style, so that you can have the interaction work on it.

Sounds like you know how to create the interaction, but be sure to apply it to the div and not the image, and have it only effect nested elements.

Let me know if you need more help.


#3

Thanks so much! That was really helpful.


#4