左过渡悬停幻灯片上的文本

Question

我有一个图片库，其中包含一些我想要优化的悬停效果。当用户将鼠标悬停在图像上时，图库中的其他图片会变暗。但我也希望在悬停时从左侧滑入一些文本。像这个网站有 http://gugroppo.com/projects.

我在鼠标悬停时显示了文本，但我无法使其从左侧顺利过渡；或者让我的叠加效果也顺利出现。一切都只是出现。这是我的 codepen.

window.sr = ScrollReveal({reset: true});
sr.reveal('img', {mobile:true});

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
  font-family: 'Lato', sans-serif;
}

.gallery{
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    width: 33.33%;
  float: left;
  display: block;
  position: relative;
}

.img-container img{
  display: block;
  width: 100%;
  height: auto;
}

#slide {
  position: absolute;
  left: -100px;
  transition: 1s;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
/*   background: rgba(123, 190, 154, 0.72); */
  background: rgba(51,51,51, 0.2);
  
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif;
  
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

.img-container:hover .overlay {
  opacity: 1;
}

@media(max-width:768px){
  .img-container {
    width: 100% !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<body>
  
<a class="anchor" name="portfolio">
  <div class="gallery">
    <h2>Portfolio</h2>
    </a>
<div id="parent">
    <div class="img-container">
      <a href="">
        <img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Basket</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
        <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a>
      <div class="overlay">
          <div class="text">Train</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
        <img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Bed</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
      <img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Chair</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
      <img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Room</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
      <img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Ring</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
        <img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Couch</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
        <img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a>
      <div class="overlay">
          <div class="text">Glass</div>
        </div>
    </div>
    <div class="img-container">
      <a href="">
        <img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a>
    </div>
</div>
  
</body>

Answer 1

您要做的是将 overflow: hidden 添加到您的容器中

.img-container{overflow: hidden;}

然后最初从元素开始文本。我通过设置

来做到这一点

.text{left: -50%;}

最后，您需要使用 container:hover 并将文本设置回 50%；

.img-container:hover .text{left: 50%;}

最后，您只需要添加一些可能的过渡属性和属性。希望这有帮助。

下面的 CSS 应该可以满足您的需求

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
  font-family: 'Lato', sans-serif;
}

.gallery{
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    width: 33.33%;
  float: left;
  display: block;
  position: relative;
  overflow: hidden;
}

.img-container img{
  display: block;
  width: 100%;
  height: auto;
}

#slide {
  position: absolute;
  left: -100px;
  transition: 1s;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
/*   background: rgba(123, 190, 154, 0.72); */
  background: rgba(51,51,51, 0.2);

}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: -50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif; 
}

.img-container:hover .text {
    left: 50%;
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

.img-container:hover .overlay {
  opacity: 1;
}

@media(max-width:768px){
  .img-container {
    width: 100% !important;

  }
}

左过渡悬停幻灯片上的文本

Text on hover slide in left transition

css

transition

hover