CODEWITHSUNDEEP
htmlcss
user2133606
user2133606

Reputation: 347

How to make image appear upon hover over text using css?

I have a list of text and I want a small image appears on the side to it when a user hovers over it each line of text. I already tried making the image "visibility:hidden" and then on hover over the link text "visibility: visible," but it does not work for me. Help please.

JSFiddle link: http://jsfiddle.net/ML9wT/2/

edit: the link.

HTML

<ul class="song-links">
    <li id="track-one"><span class="num-color">1.</span>
    <a href="#">one<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>


    <li id="track-two"><span class="num-color">2.</span>
    <a href="#">two<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

    <li id="track-three"><span class="num-color">2.</span>
    <a href="#">three<div class="song-selector"><img src="http://placehold.it/25x25"></img></div></a>
    </li>

</ul>

CSS 

.song-links {
letter-spacing: 1px;
list-style: none;
color: black;
visibility: visible;
}

.song-selector {
display: inline;
margin-left: 8px;
}

Upvotes: 0

Views: 9142

Answers (3)

James
James

Reputation: 1

Try with that :

song-links span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}

You can see example in this website: 4Stable Life

Upvotes: 0

Steve Sanders
Steve Sanders

Reputation: 8651

By default, I hid the images with display: none. On link hover, they switch to display: inline

Also, you do not need opening and closing img tags. Img is a self-closing tag.

Updated jsfiddle: http://jsfiddle.net/w8H2P/2/

<ul class="song-links">
<li id="track-one"><span class="num-color">1.</span>
    <a href="#">one<div class="song-selector"><img src="http://placehold.it/25x25" /></div></a>
</li>

<li id="track-two"><span class="num-color">2.</span>
    <a href="#">two<div class="song-selector"><img src="http://placehold.it/25x25" /></div></a></li>

<li id="track-three"><span class="num-color">2.</span>
    <a href="#">three<div class="song-selector"><img src="http://placehold.it/25x25" /></div></a>
</li>


a img {
    display: none;
}

a:hover img {
    display: inline;   
}

Upvotes: 0

ohmusama
ohmusama

Reputation: 4215

Try:

.song-links {
  letter-spacing: 1px;
  list-style: none;
  color: black;
}

.song-selector {
  display: inline;
  margin-left: 8px;
  visibility: hidden;
}

.song-links li:hover .song-selector {
  visibility: visible;
}

Upvotes: 2

Related Questions