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

【问题标题】：Text on hover slide in left transition左过渡中悬停幻灯片上的文本
【发布时间】：2018-03-16 08:54:01
【问题描述】：

我有一个图片库，其中包含一些我想要改进的悬停效果。当用户将鼠标悬停在图像上时，图库中的其他图片会变暗。但我也希望一些文本在悬停时从左侧滑入。类似这个网站的东西有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>

【问题讨论】：

这个问题实际上是关于javascript，而不是css。此外，您还有未关闭的 div 标签 (<div class="gallery">)。

标签： css hover transition

【解决方案1】：

你想要做的是添加溢出：隐藏到你的容器

.img-container{overflow: hidden;}

然后最初从元素开始文本。我通过设置来做到这一点

.text{left: -50%;}

最后，您需要通过使用 container:hover 并将文本设置回 50% 将文本调用回悬停元素中；

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

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

follow 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;

  }
}

【讨论】：