图像悬停叠加 - 水平相邻？

Question

我在我的 html 网站上放置了一张带有悬停叠加层的图像，我想要并排放置三个图像，但是当我尝试添加另一个图像时，它位于前一个图像的下方而不是旁边。我试过 float:left 但这会弄乱悬停叠加层。

有什么想法吗？

Answer 1

如果你想让它们并排，试试

.image {
  display: inline-block;
  width: 33.3%
}

不确定您是否想要并排显示图像，所以这里有一个一般提示：默认情况下，某些元素具有 display: block，除非您指定，否则它们永远不会彼此相邻。您可以使用 display: inline-block; 并指定它们的宽度来执行此操作。

Answer 2

尝试将这段代码放在它自己的 html 页面上，以确保没有其他样式影响它：

<!DOCTYPE html>
<html>
<head>
    <title>Images test</title>
</head>

<style>
.container {
    position: relative;
    width: 33.3333%;
    float: left;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

</style>

<body>

<h2>AUDIO SHOCK</h2>

<div class="container">
  <img src="https://i2.wp.com/factschronicle.com/wp-content/uploads/2017/05/Bose-QuietComfort-35-Best-Wireless-Headphones-2017-min.jpg?fit=640%2C380&ssl=1" alt="Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

<div class="container">
  <img src="https://static.bhphotovideo.com/explora/sites/default/files/styles/960/public/_shure-aonic-50-wireless-headphones_lifestyle-004-16x9.jpg?itok=GpxHyHuY" alt="Other Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

<div class="container">
  <img src="https://nonstopnewcomer.com/wp-content/uploads/2017/02/headphones-1149205_640.jpg" alt="Other Headphones" class="image">
  <div class="middle">
    <div class="text">Product Details</div>
  </div>
</div>

</body>
</html>

图像悬停叠加 - 水平相邻？

Image Hover Overlay - next to each other Horizontally?

html

css

overlay

image