I want to make icon img to slide out up any suggestions ? like social icons in this website : http://trydo.rainbowit.net/dark-portfolio-landing#portfolio
.move-left
{
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
.move-left img:hover {
transform: translateY(-4px);
cursor: pointer;
} <div class="move-left">
<li class="nav-item"><a href="#"><img src="facebook.svg" height="16px"></a></li>
</div>I'm not sure why you intend to move the img when all of your transform and transition properties are on .move-left.
I've fixed your HTML as well as per @Paulie_D's comment.
.move-left {
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
ul {
list-style: none;
}
.move-left:hover {
transform: translateY(-4px);
cursor: pointer;
}<div class="move-left">
<ul>
<li class="nav-item">
<a href="#"><img src="https://www.svgrepo.com/show/3885/facebook.svg" height="16px"></a>
</li>
</ul>
</div>If you want to move the image only when you hover on it specifically, just switch .move-left for img in your CSS.
img {
position: relative;
transition: transform 0.3s ease;
transform: translateX(0px);
}
img:hover {
transform: translateY(-4px);
cursor: pointer;
}
ul {
list-style: none;
}<div class="move-left">
<ul>
<li class="nav-item">
<a href="#"><img src="https://www.svgrepo.com/show/3885/facebook.svg" height="16px"></a>
</li>
</ul>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments