0

I'm trying to do a transition base on hover that will make an image increase its size within 1.5 sec and with 0.5 sec delay, but for some reason the width jumps straight to its full size.

<ul>
    <li>
        <h4>Silent Night</h4>
        <img src="assets/axe_silent_night_small.jpg"><a href="#">
        <h5>Add to Cart</h5>
    </li>
    <li>
        <h4>Silent Night</h4>
        <img src="assets/axe_kingmaker_small.jpg"><a href="#">
        <h5>Add to Cart</h5>
    </li>
</ul> 


.store img {
    margin:10px auto ;
    display: block;
    width:auto;
    height:170px;
    transition: width 1.5s, height 1.5s;
    transition-delay:0.5s;
}

.store img:hover {
    height:150%;
    width:150%;
    position:relative;
}

Why does this happen?

Steven Rands
  • 5,160
  • 3
  • 27
  • 56
Moliere
  • 89
  • 2
  • 9
  • 1
    thanks for your answer. i couldn't know about the other thread as i didnt new the auto is the cause of the problem. – Moliere Dec 21 '15 at 16:40

1 Answers1

0

Use max-width in the transformation and not width. And set a value on max-width to something bigger than your box will ever get.

Aman Gupta
  • 1,764
  • 4
  • 30
  • 58