将文字悬停在图片上方

debugcn 发表于 Dev

达斯汀J

我正在尝试模拟Dissolve在其页面上（底部）的作用，使文章的标题在图像上移并显示摘录，仅使用CSS。我已经建立了一个JS Fiddle，但我离它很近。如果摘录尝试关闭时鼠标靠近图像底部，则很容易陷入困境。关于如何在不使用javascript的情况下改善我的代码的任何想法？

JS小提琴示例

使用clear:bothCelmar的建议更新了我的JS Fiddle示例，该示例解决了该问题。

疯狂

关于如何在不使用javascript的情况下改善我的代码的任何想法？

不要更改触发器选择器中的position属性（在这种情况下为.sub-story：hover .sub-text）不会自然地起作用。
将过渡放置在基本选择器（.sub-story .sub-text）上，而不放在触发器选择器中。除非您希望删除触发条件时动画突然反转。（鼠标离开）

模仿Dissolve的示例（来自strach）

更改了.figure的.sub-story和.title的.sub-text

注意：删除文本格式以突出显示动画的属性。

http://jsfiddle.net/6h74q0tq/2/

/** Base Selectors */

.figure {
     position: relative;
     float: left;
     width: 376px;
     height: 300px;
}

.figure .title {
     /* Put transitions here */
     -webkit-transition: all 500ms ease-in;
     -moz-transition: all 500ms ease-in;
     transition: all 500ms ease-in;
     
     /* Put potitioning here */
     position: absolute;
     bottom: 0;
     z-index: 1;  
     
     background: #fff;
}

.figure .title .date {
     -webkit-transition: all 500ms ease-in;
     -moz-transition: all 500ms ease-in;
     transition: all 500ms ease-in;
  
     opacity: 0;  
}

.figure .details {
     -webkit-transition: all 500ms ease-in;
     -moz-transition: all 500ms ease-in;
     transition: all 500ms ease-in;
     -webkit-transition-delay: 500ms; 
     -mox-transition-delay: 500ms;
     transition-delay: 500ms;
  
     position: absolute;
     width: 376px;     
     height: 90px;
     bottom: 0;
     z-index: 0;
     opacity: 0;
}

/** Trigger Selectors */

.figure:hover .title {    
   /** Just change the animated properties */
   bottom: 90px;
}

.figure:hover .title .date {
   opacity: 1;
}

.figure:hover .details {    
   opacity: 1;
}

<div class="figure">
  <div class="img">
    <img src="http://placekitten.com/g/376/202" alt="cat1" />
  </div>
  <div class="title">
    <h4>Cat of the week <span class="date">OCTOBER 5</span></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="author">RnrNeverDies :P</div>
  </div>
  <div class="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="figure">
  <div class="img">
    <img src="http://placekitten.com/g/376/202" alt="cat1" />
  </div>
  <div class="title">
    <h4>Cat of the week <span class="date">OCTOBER 5</span></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="author">RnrNeverDies :P</div>
  </div>
  <div class="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="figure">
  <div class="img">
    <img src="http://placekitten.com/g/376/202" alt="cat1" />
  </div>
  <div class="title">
    <h4>Cat of the week <span class="date">OCTOBER 5</span></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="author">RnrNeverDies :P</div>
  </div>
  <div class="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="figure">
  <div class="img">
    <img src="http://placekitten.com/g/376/202" alt="cat1" />
  </div>
  <div class="title">
    <h4>Cat of the week <span class="date">OCTOBER 5</span></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="author">RnrNeverDies :P</div>
  </div>
  <div class="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>