Add a hover image

Support
#1

Hi there,

I want to add a hover image to the three cushions at the bottom of this page

https://www.philipclay.com/shop/

I’ve have been successful with this on the protfolio items on this page here
https://www.philipclay.com

Help would be much appreciated.

Thasnk in advance

Chris

#2

Hi Chris,

Thank you for writing in! Do you mean the title overlay on hover? That is kind of tricky to do with Recent Posts element.

Please utilize Essential Grid extension instead.

Essential Grid WordPress Plugin - Introduction
Essential Grid examples

Cheers!

#3

Hi there,

Thank you for the feedback. I will have a look at the essential grid info as it looks useful form my shop.

However, all I want to do is change the hover image that occurs image that links to another page.

The image has been inserted into a normal page created at https://www.philipclay.com/shop

#4

Hello @claywebdev,

Thanks for updating the thread. :slight_smile:

Yes, you can use Essential Grid plugin to make the necessary changes on hover event. My colleague has shared few resources that you can take a look to start with.

Thanks.

#5

Hi there,

Thanks for the update. I’ve looked through this content and been trying it our. It is very good.

Could you direct me towards the documentation for changing the hover image in essential grids as I can’t find it in this initial document

https://www.philipclay.com/shop

Many thanks

Chris

#6

Hey Chris,

Please checkout https://www.themepunch.com/faq/display-alternative-image-grids-lightbox/ and it’s documentation here https://www.themepunch.com/essgrid-doc/essential-grid-documentation/

Hope this helps!

#7

Hi Nabeel,

Thanks for the help. For some reason the lightbox does not open up the alternative image I have set. Can you help me troubleshoot at all.

All I really want to do is show a different image for when I hover over an image on my site. Essecntial grids seems a lot of pluging to do this?

Is there not a way I can access the CSS for hover image to show a new image.

This is the CSS I have used for this on my portfolio items .post-1670 .entry-thumb:before { background: url(https://www.philipclay.com/wp-content/uploads/2018/07/Shaker-Kitchen-Title-Black_i.jpg) center center; background-repeat: no-repeat; background-size: 70% ; }

I thought I should be able to access the cushion-1-i id hover image or the like somehow, without an extra extension

Thanks for your help

Chris

#8

Hello Chris,

What you are trying to do is not possible in X theme or with Essential Grid. You will need a 3rd party plugin instead.
Perhaps any of this plugin would help you instead:


https://wordpress.org/plugins/search/image+swap+on+hover/

Your homepage is a page using Layout - Portfolio page template which displays your portfolio items. If you want to have a real shop page with almost the same hover image effect like the portfolio, please create a page and assign it as your shop page. You might need to rerun the WooCommerce set up wizard.

Hope this helps.

#9

Thanks for the help RueNel.

Regards

Chris

#10

You’re welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.