Syed Talha hai Syed Talha hai - 4 months ago 16
HTML Question

image reset after transform css

I want a growing effect on hover to my div
my div code

<div class="CastData">
<a href="Artist.php?ArtistID=0000701" >
<div class="CastImage">
<img src="Public/Cast/0000701 - Kate Winslet.jpg" width="40" height="40" />
</div>
<div class="CastName">
Kate Winslet
</a>
<br />
<small>Jeanine</small></div>
</div>


this is my css code

.CastImage, .CastName{
display: inline-block;
vertical-align:middle;
margin:10px 10px 10px 0px;
}

.CastImage img{
border-radius:100%;
}

.CastData{
border-bottom: 1px solid #EEEEEE;
}

.CastData > * {
transition:all 0.5s ease;
}

.CastData:hover > *{
padding-right:10px;
transform: scale(1.2);
}


when I hover on my div, every thing grows, and then text remains big on hover, and image resets itself to previous size, why?
Ignore my link attribute, which is closing in middle of div, I want only real name and image as link, and cast name as simple text

Answer

There is a small glitch but try this Fiddle

.CastImage, .CastName{
    display: inline-block;
    vertical-align:middle;
    margin:10px 10px 10px 0px;
}

.CastImage img{
    border-radius:100%;
}

.CastData{
    border-bottom: 1px solid #EEEEEE;
    }

.CastData > * {
    transition:all 0.5s ease;
}

.CastData:hover  *{
    padding-right:10px;
    transform: scale(1.2);
}
<div class="CastData">
    <a href="Artist.php?ArtistID=0000701" >
        <div class="CastImage">
           <img src="Public/Cast/0000701 - Kate Winslet.jpg" width="40" height="40" />
       </div>          
       <div class="CastName">
           Kate Winslet
     </a>
     <br />
     <small>Jeanine</small></div>
</div>

Comments