放大悬停图库重叠

Question

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

一旦您将鼠标悬停在图像上并在移动设备上单击一次，我将尝试在缩放中编写代码。我在一定程度上做到了这一点，但我似乎无法阻止图像从彼此的顶部和底部重叠。

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

我试过应用溢出：隐藏在样式的各种组合中。

有人能帮忙吗？

<!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>

Answer 1

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

overflow: hidden on a parent element prevents its children from going outside its borders. This means that you currently only prevent the images from overlapping their parent columns. Try putting each image into its own div, and applying overflow: hidden on the div :)

下面是更改后的示例。我还将 img 的 margin-top 替换为 .img-parent 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>

放大悬停图库重叠

Zoom On Hover Image Gallery Overlapping

html

css

jpeg