CODEWITHSUNDEEP
csscss-transitions
Tyilo
Tyilo

Reputation: 30102

Image width/height transition not working

Using a transition when enlarging an image doesn't seem to work in chrome.

HTML:

<img src="foobar.png">

CSS:

        img
        {
            float: left;
            margin-right: 10px;
            border-radius: 10px;
            width: 200px;
            -webkit-transition: width 1s ease, height 1s ease;
        }
        img:hover
        {
            width: 100%;
        }

Fiddle: http://jsfiddle.net/6Dk4D/

What is wrong?

Upvotes: 18

Views: 38930

Answers (2)

RustyDev
RustyDev

Reputation: 1122

You can also use a max-width trick. Set a high max-width amount on the hover and the original image width will be respected by the transition.

http://codepen.io/rustydev/pen/BKOBNZ

Upvotes: 0

ayyp
ayyp

Reputation: 6598

It won't work with percentages it seems. Also, if you wish to transition height as well, you need to declare it in the orignal img styling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/ it works if you specify a width in pixels for the hover.

Edit: If you specify the first width as a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo

Upvotes: 25

Related Questions