将鼠标悬停在图像上时应用变换

Question

>伙计们！很抱歉打扰您可能是一个非常基本的 CSS 问题，但我在这里没有线索了......

我在屏幕上有 6 张图片。我想在悬停的图像中进行放大移动。这是我的HTML(只有几张图片，所以代码不是那么长)：

这是我的 CSS：

.container::after
{
content: "";
clear: both ;
display: table;
}    
#img1
{
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
position: relative;
}
#img2
{
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
position: relative;
}
.container:hover #img1
{
transform: scale(1.2, 1.2);
}
.container:hover #img2
{
transform: scale(1.2, 1.2);
}
.bigThumb
{
position: relative;   
float: left;
width: 33.33%;
display: flex;
overflow: hidden;
}
.bigThumb:hover
{
cursor: pointer;
}
.bigThumb:hover div{
visibility: visible;
opacity: 1; 
}

它确实执行放大，但是 一个。同时在所有六张图像中 b.当我离开当前图像时，它无法识别(这意味着它不会返回到原始比例，除非我离开主容器)

非常感谢你，再次抱歉，问一个可能很简单的问题......在问这里之前，我花了半天时间试图解决这个问题：-)

Answer 1

你的css说，将鼠标悬停在container类中时，将图像缩放#img1并#img2。我假设你的 html 看起来像

<div class="container">
<img id="img1"/>
<img id="img2"/>
</div>

如果你想单独缩放每个图像，你需要使用像这样childcss选择器(带>)，并将悬停选择器添加到图像html元素(最好在这里使用类或html元素)：

.container > img:hover {
transform: scale(1.2, 1.2);
}

该 css 说，对于悬停在container类中的任何img标签，请对其进行转换。(另请注意，:hover在图像上而不是容器上)