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

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…


Membership Dues: Why You Need To Charge Them And When To Start

Posted by Laura Occhipinti on August 6, 2014 at 9:09am 0 Comments

So you are starting a group (or maybe you already…



Support & Tips Forum

RSS Feeder

Started by Jorge Luis Vila in Ning Tips & Tricks 2.0. Last reply by El Surveyor Jul 13. 1 Reply

Site appearance

Started by The Douglas Archives in Ning 3.0 Jun 28. 0 Replies

© 2015   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips