html - :hover targeting not working exactly the way I want it to -


if hover on project text appear, if mouse on text kills hover style because that's not triggers hover.

p.description {     position:absolute;     top:50%;     left:50%;     margin: 40px 0 0 -125px; /*offset 50px center*/     transform: translatey(-50%); /*vertically centered*/     width:250px;     height:80px;     z-index:1000;     color: #ffffff;     opacity: 0; } .holder:hover p.description {     margin-top: 0; /*makes me slide up*/     opacity:1;     visibility:visible;     -moz-transition: .2s ease-in;     -o-transition: .2s ease-in;     -webkit-transition: .2s ease-in;     transition: .2s ease-in; } p.description span {     font-family: 'aileronbold';     font-size: 110%; } 

this css trying accomplish this. not sure how re-target achieve this. works want minus when mouse on text.

you can check at: http://darrenbachan.com/

change selector .holder a:hover .holder:hover a. seeing flicker issue because transition end when hover on p description element transition in. moving :hover pseudo class parent element, transition remain intact when aren't hovering on a element:

.holder:hover {     opacity: 0;     -moz-transition: .2s ease-in;     -o-transition: .2s ease-in;     -webkit-transition: .2s ease-in;     transition: .2s ease-in; } 

in order anchor element positioned on p description element, absolutely position relative .holder (since it's relatively positioned).

.holder {     position: absolute;     z-index: 10;     top: 0;     right: 0;     bottom: 0;     left: 0; } 

then remove z-index: 1000 p.description.


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -