CODEWITHSUNDEEP
css
Googlebot
Googlebot

Reputation: 15683

How to animate hover effect by CSS3

I resize an image by hover effect as

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>

#image{
    height:50px;
    -webkit-transition: height 2s;
    transition: height 2s;
}

#image:hover{
    height:100%;
}

JSFIDDLE

How should I adjust the code to make the transformation with a gradual animation?

Upvotes: 1

Views: 29

Answers (3)

agrm
agrm

Reputation: 3852

First off, you have only applied height values to the image while you attempt to apply a smooth transition to its width. Either use height or all for the transition.

Secondly, you attempt to make the new image height 100%. Now, 100% of what? Either specify a fixed height in pixels, or put it inside a container with a fixed height.

So either do:

#image {
    height: 50px;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
#image:hover {
    height: 100px; /* Height set in a fixed unit such as pixels */
}
<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>

Or wrap the image in a container with a fixed height:

.container {
  display: block;
  width: 400px;
  height: 200px;
}
#image {
    height: 50px;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
#image:hover {
    height: 100%;
}
<div class="container">
    <img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</div>

Upvotes: 1

DMcCallum83
DMcCallum83

Reputation: 550

I think you want CSS' transition. Try something like this:

#image{
    height:50px;
    transition: height 2s; // specify property and duration
}

#image:hover {
    max-height: 500px; // new height
    transition: linear; // evenly timed transition
}

Upvotes: 0

K K
K K

Reputation: 18099

Try scale transition:

CSS:

#image {
  height: 50px;
  transition: all 0.2s;
}

#image:hover {
  transform: scale(2);//Can be any value
  transition: all 0.2s height: auto;
}

Demo: http://jsfiddle.net/nwxutpvs/2/

Upvotes: 1

Related Questions