How can write a code to increase the height of the image when mouse goes over on it with HTML?

Answer 1

You can't use strict HTML for this, but you can hack it together using CSS.

First, give you image an id. This will allow us to reference it easily in CSS. Your image code should look like this...

<img src="img.jpg" alt="Whatever" id="#ourImg">

Now, the CSS. First, set the initial dimensions of your image. You probably want to use both width and height here. If you use just height, then the image will scale automatically. Depends on your desired behavior which way this should be done.

In you CSS file, define the image:

#ourImg { width: 45px; height: 125px; }

Then add a line below it using the hover pseudo-class:

#ourImg:hover { width:45px; height: 225px;}

Now, when you hover over the image, it will "grow" by 100px in height.