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: 399

Reply to This

Need a Self-hosted Ning alternative?

The SocialEngine Team has created an Import Tool for Ning 2.0 Sites.
Self-hosted & 100% White Label:
SocialEngine PHP is hosted on your own server where you have complete control over your community.

Blog Posts

Replacement Laptop Key Brands

Posted by Replacement Laptop Keys on October 12, 2015 at 5:14am 0 Comments

As you may know, there are a number of brand names or makes for laptop computers. Furthermore, there are several laptop models that pertain to each brand. It is important to keep this in mind if you ever have to seek out a replacement part or…


Gum Disease Treatment

Posted by Discovery Dental WA on October 1, 2015 at 5:43am 0 Comments

Treating gum disease can be accomplished in a number of ways, and whether it'll be an easy or difficult task depends on several things, beginning with one's health. There are a variety of treatments for gum disease depending on its severity, your…


About - Fidelus Technologies LLC

Posted by Fidelus Technologies LLC on September 29, 2015 at 1:31am 0 Comments

About - Fidelus Technologies LLC

We are Fidelus. We make the complex simple. Fidelus Technologies LLC is a leading provider of Cisco Unified…


Three Things You Can Do to Get More Out of Cisco WebEx

Posted by Fidelus Technologies LLC on September 28, 2015 at 5:26am 0 Comments

Summer is almost here. And for today’s corporate workforce that often means more frequent work-from-home days, working vacations and other circumstances that call for a WebEx meeting. With that in mind, we thought it might be a good time to…



© 2015   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips