Question

我一直在努力，但徒劳无功我并排放置了5张图片，想要像第二部分中的空军网站一样制作悬停宽度效果......这里是网站：https://www.airforce.com/ 向下滚动，你会看到并排的5个图像，当你在图像上悬停时，宽度会扩大而不会影响图像本身..我一直在尝试，但图像始终受到影响。我尝试将每个图像放在bootstrap容器上并制作宽度对容器本身的影响，但图像也在不断扩展，这是我的网站制作：https://agile-coast-64468.herokuapp.com/ 这是我的主页：

<div class="container-fluid" id="width-r">
  <div class="this">
    <%= image_tag("wood1.jpg", class: "inside")  %>
  </div>
  <div class="this">
    <%= image_tag("wood2.jpg",class: "inside" ) %>
  </div>
  <div class="this">
    <%= image_tag("wood3.jpg", class: "inside")  %>
  </div>
  <div class="this">
    <%= image_tag("wood4.jpg", class: "inside")  %>
  </div>
  <div class="this">
    <%= image_tag("wood5.jpg", class: "inside")  %>
  </div>

</div>
<div class="jumbotron">
  <h1 align="center"> Here come the ads</h1>
</div>

这是我的css：

@import "bootstrap-sprockets";
@import "bootstrap";

.navbar {
  background-color: #fff;
}

body {
  height: 100%;
}

.width-r {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 0, 581.55px, -100px);
 /* clip: shape(top, right, bottom, left); NB 'rect' is the only available     option */
}
.this {
  width: 20%;
  float: left;
  height: 581.55px;
  position: relative;
  padding: 0;

}
.inside {
  width: 100%;
  float: left;
  height: 581.55px;
  position: absolute;
  transition: 0.5s;
}

.inside:hover {
  z-index:100;
  width: 110%;
}

.navbar-ma {
/* remove space between the navbar and the images below */
  margin-bottom: 0px;
}

.jumbotron {
  height: 220px;
  margin-bottom: 0px;
  z-index: 0;
}

.container-fluid {
  padding: 0px;
}

如何使这个图像悬停效果像空军网站？

0 个答案: