htmlcsshover

How to show additional text on hover using CSS

I would like to show text when the mouse hovers over a button or <a> tag.

For example, I have this button with some text:

Original button

I have managed to make it larger when the mouse hovers over the button:

Larger button on hover

What I would like to do instead is keep the text and image on top and display some text beneath the button. Can anyone suggest how I might do this?

Solution

  • Not sure if thats what you are looking for since you didn't include your code...

    div {
  display: none;
  margin-left: 10px;
}

a:hover+div {
  display: block;
}
    <a><img src='http://vignette1.wikia.nocookie.net/planetside2/images/4/4d/Scythe_Side_View_Icon.png/revision/latest?cb=20130426065845'></a>
<div>Display Whatever</div>