我还是个初学者,抱歉,如果这是一个愚蠢的问题,我会尽量保持简短和具体。
因此,我想使用 CSS 网格显示和变换比例属性在图像网格中创建缩小效果。
我得到的结果与预期结果不符,我将在代码后发布两者的图像。
这是我使用的代码:
.meals-gallery {
background-color: #000;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(2, 1fr);
overflow: hidden;
padding: 0;
}
.meals-gallery img {
opacity: 0.7;
transform: scale(1.15);
transition: 0.5s;
width: 100%;
}
.meals-gallery img:hover {
opacity: 1;
transform: scale(1.03);
}
<section class="meals-gallery">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
<img src="http://placeholder.pics/svg/600x500" alt="">
</section>
图像在 70% 的不透明度下重叠,所以它们看起来很难看,即使我添加了溢出属性以隐藏..
这是想要的效果:
这是我取得的成就:
提前谢谢你。
最佳答案
我认为我们需要将 img
元素包装在一个容器中,例如 div
,并使用 overflow: hidden;
div
。然后我们可以transform: scale
div:hover
上的img
元素。我认为这就是您想要的效果:
.meals-gallery {
background-color: #000;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(2, 1fr);
overflow: hidden;
padding: 0;
}
.meals-gallery > div {
overflow: hidden;
position: relative;
}
.meals-gallery img {
opacity: 0.7;
transform: scale(2);
transform-origin: 50% 50%;
transition: all 0.5s ease-in-out;
display: block;
width: 100%;
}
.meals-gallery div:hover img {
opacity: 1;
transform: scale(1.1);
}
<section class="meals-gallery">
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
<div><img src="http://placeholder.pics/svg/600x500" alt=""></div>
</section>
关于CSS 网格和转换 : images overflow and overlap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49327674/