Making an Image Visible on Text Hover
-
Hi all.
I’m trying to have an image appear when I over over a text in a table. There are multiple cells in the table, I need it so that when you hover over different cells a different image will show in the same image holder.
The blog I need help with is: (visible only to logged in users)
-
Hey there,
I built an example here:
https://badaboomtest.wordpress.com/fancy-hover-gallery/The HTML I used is a simple list. Each list item should have the text you want and the image you want to show when hovering on that text. So in my editor my example looks like this:
https://cloudup.com/cDey-FGAjkUThe text can link to another page if you want to show a larger gallery on another page like the example site does. As long as the text and image are in the same list item this will work.
Then you also need to add a class to the list for the CSS. So you need to switch to the HTML editor and change
<ul>to<ul class="fancy-gallery">.Then you need to add this CSS to your Customizer:
ul.fancy-gallery { position: relative; list-style:none; padding-right:33%; } ul.fancy-gallery li { list-style:none; display: inline-block; width: 45% } ul.fancy-gallery li img { position: absolute; top:0; right:0; width:33%; height:auto; visibility:hidden; } ul.fancy-gallery li:hover img { visibility:visible; }NB Not optimised for mobile. It should work on mobile, but it might need a bit of extra CSS if you need to make the image bigger and text in one column on mobile.
-
Hi Kristarella, thank you so much for that help, I feel I am nearly there…! When you are creating the list, how can you format it so there are three columns and then the images appear in the fourth column?
THANK YOU!!!!
-
- The topic ‘Making an Image Visible on Text Hover’ is closed to new replies.