如何在悬停或单击时放大图像？ [关闭]

我正在尝试使用 HTML 和 CSS 制作一堆图像，如果我将鼠标悬停或单击其中任何一个，它将在同一页面中放大。这就是我能够做的：

<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" />

仅使用悬停的一种可能性是使用transform:scale

JSfiddle 演示 http://jsfiddle.net/Paulie_D/mJ6Vc/2/

CSS

img {
    transition:transform 0.25s ease;
}

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