Home › Forums › CSS › How To: Make hidden span slide up with transition duration? › Re: How To: Make hidden span slide up with transition duration?
You need to have the same properties defined in both “before transition” and “after transition” states so there is something to base the animation on. Here are the quick fixes to get you started with something that works:
ul.products li.product .price {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
position: absolute;
color:#FFF;
width: 80px;
height: 80px;
padding: 30px;
position: absolute;
font-size: 35px;
font-weight:normal;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
background: #ff387a url(inc/images/trnsprnt_diag_lines.png) repeat;
text-decoration: none;
left: 300px;
top: 300px;
}
ul.products li.product:hover .price {
left: 75px;
top:60px;
}