css - applying css3 translate property -
i applied translate property link. translate-y(-50px);
on hover , works fine. when hover mouse on image reverse animation when first time hover on it translate y -50px problem when mouse off it again translate y -50px;
here code
.nav{ background-color:red; padding:10px; font-size:20px; transition:0.5s all; margin-top:80px; } .nav:hover{ transform:translatey(-50px); }
<html> <head></head> <body> <a href="#" class=nav>home</a> </body> </html>
add parent fix issue , apply translate style when hover on parent
.parent { border: 1px solid green; display: inline-block; } .nav { background-color: red; padding: 10px; font-size: 20px; transition: 0.5s all; display:block; } .parent:hover .nav { transform: translatey(-50px); }
<div class="parent"> <a href="#" class=nav>home</a> </div>
Comments
Post a Comment