How to enlarge an image on hover or click?

Add all the images to a container, for example:

<div class="imageContainer">
  <img src ="lion1.jpg" height="150" width="300" />
</div>

Then set some CSS that does something to all <img> tags in that container when hovered:

.imageContainer > img:hover {
  width: 500px;
  height: 200px;
}

I have not tried this but I think it might get you on the right track to experiment yourself.

One possibililty using hover only is to use transform:scale

JSfiddle Demo

CSS

img {
    transition:transform 0.25s ease;
}

img:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}

Related