Question

我正在尝试模仿The Dissolve在其页面（底部）上执行的操作，使文章的标题向上移动到图像上并显示摘录，仅使用CSS。我已经建立了一个JS小提琴，我很接近，但不是那里。如果在摘录试图关闭时鼠标靠近图像底部，则很容易陷入困境。有关如何在不使用javascript的情况下改进代码的任何想法？

JS Fiddle example

用我的JS Fiddle示例更新了来自Celmar的clear:both建议解决了这个问题。

Answer 1

为了解决“转移”问题。在整个页面中，在第二个和第三个子故事元素之间添加它（基本上，新行开始的位置）。这个问题是由不同高度的元素的浮动定位引起的。

<div style="clear:both;"></div>

Answer 2

有关如何在不使用javascript的情况下改进代码的任何想法？

请勿更改触发器选择器中的position属性（.sub-story：在这种情况下为hover .sub-text）不能像预期的那样工作。
将基础选择器（.sub-story .sub-text）上的过渡放在触发器选择器中。除非你想在删除触发条件时突然颠倒动画。（鼠标离开）

模仿Dissolve（来自strach）

更改.sub-story for .figure和.sub-text for .title

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

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>

Source

在悬停时将图像移到图像上方

2 个答案: