Display title on image hover using attr()

Question

Can I add this to a image? I tried but its not working.

img[title]:hover:after {
  content: attr(title);
  padding: 3px 3px 3px 3px;
  margin-top: 4px;
  background: #000;
  position: absolute;
  z-index: 9999;
}

<img title="Online" alt="Online" height="16px" style="margin-top:-5px;" src="https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png">

possible duplicate of http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag — code.rider, Dec 11 '15 at 11:30
Related - http://stackoverflow.com/questions/11672946/styling-an-image-title-attribute-using-css — Paulie_D, Dec 11 '15 at 11:31

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

Since pseudo elements do not work with img, I suggest you to wrap it inside a div and then use the properties. Use can use the data-* attributes to replace the title attribute of image.

.image-container:hover:after {
  content: attr(data-title);
  padding: 3px 3px 3px 3px;
  margin-top: 4px;
  background: #000;
  position: absolute;
  z-index: 9999;
  color: #fff;
}

<div class="image-container" data-title="Online">
  <img alt="Online" height="16px" style="margin-top:-5px;" src="https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png">
</div>

edited May 23 '17 at 12:30

Community

1
1

answered Dec 11 '15 at 11:29

m4n0

29,823
27
76
89

1

If you know it's a duplicate just vote to close (which you did) there is no point in answering...you're just duplicating content. – Paulie_D Dec 11 '15 at 11:32
But I did not see any answer of using a container in those. If you get it, please link it here. I will delete it. – m4n0 Dec 11 '15 at 11:34
Then you should add our answer there..not here....at least I think so. Perhaps pointing to a different "duplicate" :) – Paulie_D Dec 11 '15 at 11:35
Guess, we will need to reopen this question. Can we? – m4n0 Dec 11 '15 at 11:36
2

Nah...let's leave it...but in general just voting to close is the only thing to do IMO – Paulie_D Dec 11 '15 at 11:37
do you know guys ? if you can't answer something then please leave it alone.i saw that threads before but they wasn't work.that is why I asked it here. – Don Laknath Dec 11 '15 at 11:40
Ah. Apologies for the trouble! I have asked to reopen this for you. – m4n0 Dec 11 '15 at 11:42
1

ah.thanks.. :) :) anyway I can use your method :) – Don Laknath Dec 11 '15 at 11:43

Display title on image hover using attr()

1 Answers1