Display Image on Hovered Link - CSS Only, no scripts needed.

Want to add links, and display an image when the link is hovered?

See example in video below.


There are a lot of scripts out there to help you do this. The problem with using JavaScript on Ning, you have to add scripts to the Custom Code Box. And the code in the Custom Code Box loads last.


The code I am providing simply displays a thumbnail image below your link, when the link is hovered. I wrote the code for a Ning Text Box. There are 2 parts:

  • HTML with your links and images
  • The CSS

HTML Sample Code:

  • Edit HTML code below, and add to a Ning Text Box.
  • When you edit the Text Box, be sure to click on the HTML button.
  • You may not want your links wrapped with the <h4> tag. If not, for each sample link, remove the start <h4> and the ending of the tag </h4>.
  • Change the links to your links - - your_link1, your_link2...
  • Change the link text to your text - - Link #1 Text, Link #2 Text...
  • Change the image URLs to your image URLs - - your_image1, your_image2...
  • Images can be most any size. I suggest making the width similar to the area where the thumbnail will be displayed.
  • Please make sure there is a <br> line break after your Link Text.
  • To add more links, copy/paste the block of code between <h4> and </h4>.
  • Paste your edited code into Text Box.
  • Click on Save.
<h4><a target="_blank" href="your_link1">Link #1 Text<br /><span class="hovlinks"><img src="your_image1" /></span></a></h4>
<h4><a target="_blank" href="your_link2">Link #2 Text<br /><span class="hovlinks"><img src="your_image2" /></span></a></h4>


CSS Code:

Add the following CSS to your Advanced CSS via: My Network/Settings/Appearance/Advanced

span.hovlinks {
a>span.hovlinks img {
display: none;
a:hover>span.hovlinks img {
display: block;




Tags: css display image, css display image on hover, display image, display image on hover link, display on hover, hover, hover link, image, link, no scripts, More…only css

Views: 364

Reply to This

Blog Posts

A Picture May Be Worth 1000 Members

Posted by Laura Occhipinti on September 20, 2014 at 7:51pm 1 Comment

Take pictures at EVERY event that you host for your group.  Do not…


Jamroom CMS - An Alternative to Ning

Posted by Paul Asher on January 19, 2015 at 7:52am 1 Comment

Jamroom is a modular open source Community CMS that is uniquely customizable and powerful. 

Running on your own server, you have 100%…



© 2015   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips