html - 缩放转换时列中的 CSS 元素位于上边框下方
问题描述
我有 4 列图像使用column-count
,我希望它们在鼠标悬停时缩放。
第一列工作正常,但接下来的三列将在转换时位于上边框下方。
我尝试了各种边距和填充,我也尝试过z-index
,但没有奏效。
这是现场JSFiddle
代码:
.content{
margin-top: 20px;
background-color: black;
}
.photos img {
margin-bottom: 10px;
vertical-align: middle;
height: auto;
width: 100%;
}
.photos {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
li img {
-webkit-transition: 0.2s;
}
li img:hover {
-webkit-transition: .5s;
transform: scale(1.3);
}
<div class="content">
<ul class="photos">
<li>
<img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
</li>
<li>
<img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
</li>
<li>
<img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
</li>
<li>
<img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
</li>
</ul>
</div>
解决方案
您可以切换到 flexbox 并毫无问题地实现相同的行为。
只需像这样调整你的CSS:
.photos {
display: flex;
}
li {
width: 25%;
}
这是一个工作现场 Codepen:https ://codepen.io/alezuc/pen/jObWjLm
更新:
好的,所以如果你想实现你在下面的评论中发布的内容,我建议你转向纯 CSS Mansory 方法。这是代码:删除列管理和列表(ul / li)并使用div:
<div class="content">
<div class="item">
<img src="https://placehold.it/600x620.jpg">
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
</div>
<div class="item">
<img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
</div>
<div class="item">
<img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
</div>
<div class="item">
<img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
</div>
<div class="item">
<img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
</div>
<div class="item">
<img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
</div>
<div class="item">
<img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
</div>
<span class="item break"></span>
<span class="item break"></span>
<span class="item break"></span>
</div>
这是CSS代码:
.content {
background-color: black;
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
height: 960px;
/* Optional */
padding: 0;
width: 100%;
margin: 40px auto;
counter-reset: items;
}
.item {
width: 24%;
/* Optional */
position: relative;
margin-bottom: 1%;
}
/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n) { order: 4; }
/* Force new columns */
.break {
flex-basis: 100%;
width: 0;
margin: 0;
content: "";
padding: 0;
}
img {
max-width: 100%;
height: auto;
transition: 0.2s;
}
img:hover {
transition: .5s;
transform: scale(1.12);
}
这是工作现场 Codepen:https ://codepen.io/alezuc/pen/MWayKaq
这里是我得到这种方法的参考。
推荐阅读
- c# - 匿名托管的 DynamicMethods 程序集:无法将类型“string”隐式转换为“int”
- python - 从下到上减少 lambda 打印
- node.js - 无法使用 Dockerfile 安装 Nodejs
- flutter - 颤动:BLoC Builder 未更新,尽管我在调试器中看到新的/不同的状态
- ios - 如何处理persistentContainer加载失败的情况
- javascript - 为什么我的外部 javscript onclick 不起作用
- ionic-framework - Ionic v5 - 离子幻灯片如何改变分页位置
- angular - 如何让 * ngFor 生成的每个输入都有自己的表单控件
- python - 测试文件夹中的相对导入:ImportError
- python - 是否可以在不使用 paypal_dict 表单的情况下集成 Django Paypal IPN?