Essential Grid WP
09.13.2016
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.esg-overflowtrick {overflow: visible !important} .esg-grid li.eg-quincy-wrapper { -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .esg-grid li.eg-quincy-wrapper:hover { -webkit-transform: scale(1.25, 1.25) !important; -moz-transform: scale(1.25, 1.25) !important; -o-transform: scale(1.25, 1.25) !important; -ms-transform: scale(1.25, 1.25) !important; transform: scale(1.25, 1.25) !important; z-index: 9999 !important; } |
Where to add the Custom CSS:
https://www.themepunch.com/faq/where-to-add-custom-css-javascript/
