我正在try 制作一种悬停效果，这样当鼠标悬停在任何图像上时，衬衫的比例就会变为零，艺术就会放大. 不幸的是，我搞不懂这一点--我对此还是个新手 这就是我到目前为止所拥有的. 如果有任何帮助，我将不胜感激.
.grid-container {
display: grid;
}
.grid-container>* {
grid-area: 1/1;
/* shirt and art above each other */
display: grid;
grid-auto-flow: column;
/* column flow so you can add as many image as you want */
grid-auto-columns: 1fr;
/* same width column */
place-items: center;
/* center everything */
}
.shirt img {
max-width: 90%;
/* controls the width of the shirt images */
}
.art img {
max-width: 50%;
/* controls the width of the art images */
}
.art {
transition-property: transform;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
}
.art img:hover .scale.left{
backdrop-filter: blur(5px);
transform: scale(1.3);
}<div class="grid-container">
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png">
<img src="https://i.imgur.com/oS8QWPI.png">
<img src="https://i.imgur.com/oS8QWPI.png">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale left">
<img src="https://i.imgur.com/jeNzULX.png" class="scale mid">
<img src="https://i.imgur.com/jeNzULX.png" class="scale right">
</div>
</div>