so i'm trying have text appear after mouseover css apparently not work. used reference: text on image mouseover?
i enormously appreciate answer
the code 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 tried without transition, still not work.
you need activate hover sibling using +
so move class link.
also don't put transition's in hover rule keep main style.
also visibility not transition-able style use opacity instead.
this same 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>
Comments
Post a Comment