Adding text on mouseover with CSS

Question

so I'm trying to have text appear after mouseover with CSS but apparently it does not work. I used this as reference: Text on image mouseover?

I would enormously appreciate your answer

The code is below:

    .resume p#pname {
      position: absolute;
      top: 367px;
      left: 1075px;
      font-weight: bold;
      visibility: hidden;
    }
    .resume img.pdf:hover #pname {
      visibility: visible;
      transition: visibility 1s ease-in;
    }

<div class="resume">
  <a href="#">
    <img style="height:auto; width:auto; max-width:75px; max-height:75px;" src="imgs/pdf.png" class="pdf">
  </a>
  <p id="pname">PDF Resume</p>
  <a href="#">
    <img class="word" style="height:auto; width:auto; max-width:65px; max-height:70px;" src="imgs/mword.png">
  </a>
  <p id="wname">Word Doc Resume</p>
  <img id="pline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line1.png">
  <img id="wline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line2.png">
</div>

I also tried without the transition, but still does not work.

Beware its not `#pname`is `#wname` – Luís P. A. Jul 17 '15 at 11:57 — Luís P. A., Jul 17 '15 at 11:57

score 2 · Accepted Answer · 2015-07-17T12:03:53.097

You need to activate hover as a sibling using +

So move your class to the link.

Also you don't put transition's in the hover rule you keep it to the main style.

also visibility is not a transition-able style use opacity instead.

This is the same for most on off style rule's

.resume p#pname {
  position: absolute;
  top: 367px;
  left: 1075px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s ease-in;
}
.resume .pdf:hover + #pname {
  opacity: 1;
}

<div class="resume">
  <a href="#" class="pdf">
    <img style="height:auto; width:auto; max-width:75px; max-height:75px;" src="imgs/pdf.png">
  </a>
  <p id="pname">PDF Resume</p>

  <a href="#">
    <img class="word" style="height:auto; width:auto; max-width:65px; max-height:70px;" src="imgs/mword.png">
  </a>
  <p id="wname">Word Doc Resume</p>
  <img id="pline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line1.png">
  <img id="wline" style="height:auto; width:auto; max-width:200px; max-height:150px;" src="imgs/line2.png">
</div>

Thank you so much! and also thank you for explaining. Now I know, again thank you. Works like a charm — rinkemiku, Jul 17 '15 at 13:04

score 1 · Answer 2 · answered Jul 17 '15 at 12:00

I don't think that hove will work with visibility:hidden elements.

First try to make it work with color change (for testing): Change color on mouse over.

Then if everything is working, try to replace visibility with opacity: - opacity: 0; opacity: 1; (0 - invisible, 1 - visible). Else be sure that your hover element got width and height.

Adding text on mouseover with CSS

2 Answers2