I'm trying to make a stack of images using HTML and CSS, that if I hover or click on any of them, it will be enlarged in the same page. This is what I've been able to do:

<img src ="mark1.jpg" height="150" width="300" /> <img src ="mark2.jpg" height="150" width="300" /> <img src ="mark3.jpg" height="150" width="300" /> <img src ="mark4.jpg" height="150" width="300" /> <img src ="watson1.jpg" height="150" width="300" /> <img src ="watson2.jpg" height="150" width="300" /> <img src ="watson3.jpg" height="150" width="300" /> <img src ="watson4.jpg" height="150" width="300" /> <img src ="watson5.jpg" height="150" width="300" /> <img src ="morgan1.jpg" height="150" width="300" /> <img src ="nyong1.jpg" height="150" width="300" /> <img src ="lion1.jpg" height="150" width="300" />
8

3 Answers

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); }
1

Add all the images to a container, for example:

<div> <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.

2

Check this fiddle

HTML:

<body> <div> <a href="www. abc.com" target="_blank"> <img src="" alt="image"/></a> </div> </body>

CSS:

#rightImage { height:275px; float:left; position:relative; } #rightImage:hover img { height: 300px; }