悬停时缩放图像库重叠

我正试图为我的电子商务网站创建一个图片库。

我正试图在你悬停在图像上并点击手机后进行缩放编码。我已经在一定程度上做到了这一点，但我似乎无法阻止图像从顶部和底部重叠。

这是一个例子https://w3bits.com/labs/css-image-hover-zoom/我正在尝试使列中的所有图像缩放，并与网页上显示的基本示例一样。

我尝试过应用OverFlow：隐藏在风格的各种组合中。

有人能帮忙吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
}
.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
overflow: hidden;
}

/* Create two equal columns that sits next to each other */
.column {
height:100%;
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 0 4px;
overflow: hidden;
}
.column img {
margin-top: 8px;
vertical-align: middle;
transition: transform .5s ease;
}

.column img:hover {
transform: scale(1.5);
}

</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row"> 
<div class="column">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
<img src="" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>  

</div>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;

// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%";  // IE10
elements[i].style.flex = "50%";
}
}

</script>
</body>
</html>

复制并粘贴我的评论作为答案：

父元素上的

overflow: hidden防止其子元素超出其边界。这意味着您当前仅防止图像与其父列重叠。尝试将每个图像放入其自己的div中，并在div上应用overflow: hidden：(

下面是更改后的示例。我还用.img-parent的margin-top替换了img的margin-top，否则图像也会扩展到顶部间隙。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
}
.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
overflow: hidden;
}

/* Create two equal columns that sits next to each other */
.column {
height:100%;
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 0 4px;
overflow: hidden;
}
.column img {
/*margin-top: 8px;*/
vertical-align: middle;
transition: transform .5s ease;
}

.column img:hover {
transform: scale(1.5);
}
.img-parent {overflow: hidden; margin-top: 8px}

</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row"> 
<div class="column">
<div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>
<div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>        <div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>
</div>
<div class="column">
<div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>        <div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>        <div class="img-parent">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
</div>
</div>  

</div>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;

// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%";  // IE10
elements[i].style.flex = "50%";
}
}

</script>
</body>
</html>

相关内容

最新更新

热门标签：