Making an Image Visible on Text Hover

• 

  voltzclarke · Member · Mar 24, 2017 at 3:49 am

  • Copy link
  • Add topic to favorites

  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)

• 

  voltzclarke · Member · Mar 24, 2017 at 3:52 am

  • Copy link

  This is what I am trying to replicate.

• 

  voltzclarke · Member · Mar 24, 2017 at 3:52 am

  • Copy link

  This is what I am trying to replicate.

• 

  kristarella · Member · Mar 24, 2017 at 4:25 am

  • Copy link

  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-FGAjkU

  The 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.

• 

  voltzclarke · Member · Mar 24, 2017 at 5:17 am

  • Copy link

  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!!!!

• 

  supernovia · Staff · Mar 27, 2017 at 5:25 pm

  • Copy link

  @voltzclarke where it says width: 45%, change that to 30% or so. Cheers :)