How to show additional text on hover using CSS [duplicate]

Question

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:

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

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?

Post you code..

LIJIN SAMUEL
– LIJIN SAMUEL

2017-04-10 10:07:17 +00:00
Commented Apr 10, 2017 at 10:07 — LIJIN SAMUEL
– LIJIN SAMUEL, Commented Apr 10, 2017 at 10:07

Abhishek Pandey · Accepted Answer · 2017-04-10 13:13:52Z

1

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>

edited Apr 10, 2017 at 13:13

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered Apr 10, 2017 at 10:14

Ulug Toprak

1,2421 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2025-03-11 15:31:53Z

0

Add hover state to parent element and styles to child

.parent .child {display: none}
.parent:hover .child {display: block}

Remember to put text you want to show in front of picture (position: absolute or/and z-index manipulation)

edited Mar 11 at 15:31

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Apr 10, 2017 at 10:14

WitkowskiMichau

1

Collectives™ on Stack Overflow

How to show additional text on hover using CSS [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related