CODEWITHSUNDEEP
htmlcss
rinkemiku
rinkemiku

Reputation: 29

Adding text on mouseover with CSS

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.

Upvotes: 0

Views: 434

Answers (2)

user4563161
user4563161

Reputation:

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>

Upvotes: 2

Nikita S. Doroshenko
Nikita S. Doroshenko

Reputation: 11

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.

Upvotes: 1

Related Questions