Question

我在html网站上放了一个带有悬停覆盖图的图像，我希望它们中的三个并排，但是当我尝试添加另一个时，它会在前一个下面而不是在它旁边。我试过漂浮：但是这会弄乱悬停覆盖物。

有什么想法吗？

Answer 1

如果你想要它们并排，请尝试

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

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

Answer 2

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

＆＃13;

<!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://i1.wp.com/valleyzone.com/wp-content/uploads/2017/11/BeoPlay-H8-Top-10-Best-Wireless-Headphones-of-2015-e1512395053322.jpg?fit=640%2C380&ssl=1" 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>

＆＃13;

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

2 个答案: