Question

我正在尝试在悬停时缩放单张图像，我有20张图像，两行，10行一行。我当前的代码缩放了整行，你能帮我解决这个问题吗？

html文件

<p class="image">
<img src="images/100.jpg" alt="100!" width="90" height="125" border="0">
<img src="images/99.jpg" alt="99!" width="90" height="125" border="0">
<img src="images/98.JPG" alt="98!" width="90" height="125" border="0">
<img src="images/97.jpg" alt="97!" width="90" height="125" border="0">
<img src="images/96.jpg" alt="96!" width="90" height="125" border="0">
<img src="images/95.jpg" alt="95!" width="90" height="125" border="0">
<img src="images/94.jpg" alt="94!" width="90" height="125" border="0">
<img src="images/93.jpg" alt="93!" width="90" height="125" border="0">
<img src="images/92.jpg" alt="92!" width="90" height="125" border="0">
<img src="images/91.jpg" alt="91!" width="90" height="125" border="0">
</p>

css文件

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    -webkit-transform:scale(2); /* Safari and Chrome */
    -moz-transform:scale(2); /* Firefox */
    -ms-transform:scale(2); /* IE 9 */
    -o-transform:scale(2); /* Opera */
     transform:scale(2);
}

当我在每张图片之前使用<p class...>时，它的工作正确但是使用这种方法我将每张图像都放在一行。

Answer 1

从以下位置更改选择器：

.image:hover img

到

.image img:hover

<强> jsFiddle example

Answer 2

以下是缩放方法的示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
</style>
</head>
<body>

<br>
  
<div class="zoom"></div>

</body>
</html>

HTML + CSS - 悬停时缩放图像

2 个答案: