TEXT movement using transition and translate

by Kheema Pandey

HTML

<div class="main">
  <div class="logo"></div>
  <div class="text">L<span>ogo</span></div>
  </div>

CSS

.main{position:relative;}
.logo{
background:url("http://placehold.it/100x100") no-repeat; 
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
  z-index:-1;
}
.text{
color:Blue; font-size:5vh; 
position:absolute;
left:0;
top:0;
z-index:1;}

.logo:hover{ 
visibility:hidden;
opacity:0; 
transition:visibility 0.5s linear 0.5s, opacity 0.5s linear;
}

div.main:hover .text span{display:inline-block;color:red;
transform: translate(0,-10px); transition: all 0.5s ease-in-out;
}