this question has answer here:
the title kind of describes it. here's code:
#main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: questrial; font-size: 70px; margin-top: -7px; margin-left: -2px; color: #404040; border-bottom: 2px solid #404040; line-height: 0.85; } #about { float: left; clear: both; width: 38%; height: 30vh; margin-top: 7vh; margin-left: 31%; text-align: center; background-color: #33cc33; border-radius: 100%; opacity: 0.6; transition: opacity .5s; -webkit-transition: opacity .5s; transition: margin-top .5s; -webkit-transition: margin-top .5s; transition: margin-bottom .5s; -webkit-transition: margin-bottom .5s; } #about:hover { opacity: 0.8; margin-top: 5vh; margin-bottom: 2vh; } #work { float: left; width: 38%; height: 30vh; margin-top: 0vh; margin-left: 10%; text-align: center; background-color: #323280; border-radius: 100%; opacity: 0.6; transition: opacity .5s; -webkit-transition: opacity .5s; } #work:hover { opacity: 0.8; } #contact { float: right; width: 38%; height: 30vh; margin-top: 0vh; margin-right: 10%; text-align: center; background-color: #ff6600; border-radius: 100%; opacity: 0.6; transition: opacity .5s; -webkit-transition: opacity .5s; } #contact:hover { opacity: 0.8; } .label { font-family: questrial; color: white; font-size: 35px; margin-top: 80px; }<!doctype html> <html> <head> <title>kurb - home</title> <link rel="stylesheet" type="text/css" href="kurb.css"/> <link href='http://fonts.googleapis.com/css?family=questrial' rel='stylesheet' type='text/css'> </head> <body> <div id="main"> <p id="k">kurb</p> </div> <div id="about"> <p class="label">blah blah blah</p> </div> <div id="work"> <p class="label">blah blah blah blah blah</p> </div> <div id="contact"> <p class="label">blah blah blah blah</p> </div> <script type="text/javascript"> </script> </body> </html>basically, i'm trying top div (#about) rise above lower 2 2 vh when moused over. can see, i've kind of got it, it's not doing actual animation - rises instantly. also, there should color transition on mouseover - should become less transparent. works on others, not on one.
it gets interesting when rid of dashes in margin-top , margin-bottom. then, instead of bottom 2 moving down, kind of snap place. i'm looking for, animation. have no idea what's going on. there i'm missing here?
did mean this? fiddle: https://jsfiddle.net/99464tyx/2/
if replace transitions transition: .5s;
Comments
Post a Comment