Hovering description over links

[jakecoury]

Hi I installed this theme a bit ago and was wondering if anyone would know how to put descriptions of my different links when you hover over them..

Here’s where I would want the hovering text to be.
http://i1239.photobucket.com/albums/ff519/Jake_Coury/ScreenShot2014-06-10at54437PM.png

Here’s my blog:
finally-focused.tumblr.com

[Paulie_D]

Firstly there is no text inside the links so you would have to add that.

This is the current structure (example)

<a href="ask"><img src="[snipped]message.png" width="20px;"></a>

See..no text

so you would have to change each one to something like

<a href="ask"><img src="[snipped]message.png" width="20px;">Insert Text Here</a>

Then we can start on the actual positioning.

[jakecoury]

Okay I’ve just finished doing that
http://finally-focused.tumblr.com/

[Paulie_D]

OK…cool.

Oops…my apologies. I should have said put those words in a <span> tag.

<a href="ask"><img src="[snipped]"><span>Insert Text Here<span></a>

You should also give each link an individual class but try to use something that can be repeatable but specific so.

class="link- ask", class="link-photos" and so on.

<a class="link-ask" href="ask"><img src="[snipped]"><span>Ask<span></a>

<a class="link-photos" href="ask"><img src="[snipped]"><span>Photos<span></a>

Get the idea?

Then add this

[class^="link-"] {
position:relative;
}

[Paulie_D]

From there we need to make the spans disappear and set up a new position for them.

Generically we do that by adding

[class*="link-"] span {
  position: absolute;
  display: none;
}

Then we can position each item individually by using the class assigned..like so

.link-ask span {
  top:150%;
  left:-50%;
  }

.link-photos span {
  top:150%;
  left:0%;
}   

.link-email span {
  top:150%;
  left:50%;
}

Then we need to tell the text to show up when we hover each link, like so

[class^="link-"]:hover span {
  display: inline-block;
}

You can play with the individual numbers as you wish but it should look a little like this:

http://codepen.io/Paulie-D/pen/naGJD

[Author]

Posts