Zoom Entire Grid Item on Hover

Essential Grid comes with several built-in animations that allow you to animate/zoom the media or other elements. But if you wanted to zoom the entire grid item together, this can be accomplished with some custom CSS. Here’s an example of what we’ll accomplish:



To get started, first visit the Item Skin Editor for your grid’s skin:


Next, copy the class name being used for the skin:


The Custom CSS

For this example, “.eg-quincy-” is the skin’s class name prefix. Replace this with whatever the class name prefix is being used for your skin. Then change the number “1.25” to whatever scale amount you want the item to scale to.


Where to add the Custom CSS: