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
Post a Comment