Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Add Custom Meta Image on Hover

01.30.2015Dirk
dirk_test___Essential_Portfolio

Sometimes you want to show a different, custom background image when hovering one item like the red image above in the example screenshot. This cannot be done out-of-the-box with the current Essential Grid options. But you can include this with a few manual steps following below.

1. Create a new Text/HTML layer in the Skin Editor

Essential_Grid_‹_Essential_Portfolio_—_WordPress

Select the skin you want to work with and then create a new text layer in the skin editor.

You then need to switch the Layer Source to Text/HTML, remove all styling in the “Style” tab and include the following HTML:

We will define the CSS class “fullsize-cover” in the next step.

The %eg-imagesrc% should be replaced with the meta you save the images in. You can use our own Essential Grid Meta Handling to do so(like above eg-imagesrc example) or use other ready made metas like “%_product_image%” for a WOO product image for example.

2. Add the custom CSS

Essential_Grid_‹_Essential_Portfolio_—_WordPress 2

Now it is time to add the custom CSS. First of all we add the CSS that defines the class “fullsize-cover” that we used in step 1.

We set this cover layer to be fullsize from the top left corner of the item:

Then we set the parent layer to be of that 100% size too, please note the !important. You will find the parent layers class in the tabs header (see screenshot to the left, click to enlarge), here “.eg-washington-element-0”.

3. Check Link/SEO

Essential_Grid_‹_Essential_Portfolio_—_WordPress 3

Chances are good all is working already.

In case it does not please check the “Link/SEO” tab. The “Link To” setting should be set to “None” and the “Fix: !important” checkbox should be unchecked.

In case you need the layer to be a link and have a “Link To” other than “None” please add a “-a” to the parent class from step 2 (Example: “.eg-washington-element-0-a”).

Related FAQs