Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How To: Make hidden span slide up with transition duration? Re: How To: Make hidden span slide up with transition duration?

#126729
Merri
Participant

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;
}