使用 css 平滑过渡

Question

我想像在链接的小提琴中一样管理悬停事件，假设我不知道

内容将是...

我的问题是：如何在悬停时添加平滑过渡？

Fiddle

.news{
 max-width:250px; 
   font-family:Arial, Helvitica, sans-serif;
}

.thumbs {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
  text-align: left;
  letter-spacing: -0.25em;
}

.thumbs li {
  display: inline-block;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  letter-spacing: normal;
  background-color: white;
  border: 1px solid #CCC;
  min-height:264px;
}

.thumbs .news-img-container {
  height: 180px;
  overflow: hidden;
  z-index: 0;
}

.thumbs li a img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.thumbs li a div.text {
  display: block;
  padding: 10px;
  text-transform: none;
  font-weight: 300;
  text-align: left;
  color: rgba(0, 0, 0, 0.9);
  background-color: white;
  border-top: 2px solid #8c1c40;
  margin: -40px 15px 0 15px;
  z-index: 1;
  position: relative;
  height: 100px;
  overflow:hidden;
}

.thumbs li a div.text:hover {
  height: 100%;
  min-height:206px;
  vertical-align: bottom;
  margin-top: -160px;
}

.thumbs li a div.text:hover:after {
	    background: none;
}


.thumbs li a div.text:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2em;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
}

.thumbs li a div.text p {
  padding: 0;
  margin: 0;
  font-size: .9em;
}

h2 {
	color:#8c1c40;
	font-size:1em;
	text-transform:uppercase;
	margin:0 0 5px 0;
	font-weight:bold;

}
a {
  text-decoration:none;
  }
}

<div class="news">
  <ul class="thumbs">
    <li>
      <a href="#">
        <div class="news-img-container">
          <img src="http://docteurnature.org/boutique/img/cms/homepage_logo_1.jpg" />
        </div>
        <div class="text">
          <h2>Title h2</h2>
          <p>Long text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsum...</p>
        </div>
      </a>
    </li>
    
     <li>
      <a href="#">
        <div class="news-img-container">
          <img src="https://static.pexels.com/photos/65977/pexels-photo-65977-large.jpeg" />
        </div>
        <div class="text">
          <h2>Title h2</h2>
          <p>Shorter text :lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
        </div>
      </a>
    </li>
    
     <li>
      <a href="#">
        <div class="news-img-container">
          <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african-large.jpg" />
        </div>
        <div class="text">
          <h2>Title h2</h2>
          <p>even shorter text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis.</p>
        </div>
      </a>
    </li>
    
     <li>
      <a href="#">
        <div class="news-img-container">
          <img src="https://static.pexels.com/photos/28201/pexels-photo-28201-large.jpg" />
        </div>
        <div class="text">
          <h2>Title h2</h2>
          <p>Smallest text: lorem ipsum dolor sit amet...</p>
        </div>
      </a>
    </li>
  </ul>
</div>

此外，如果动画在悬停图片时启动会很棒......

如果可能的话，我想避免使用 js……但如果没有，那么……为什么不呢。

非常感谢您的帮助

Answer 1

这是您更新的小提琴，在悬停时平滑过渡。

https://jsfiddle.net/fhqxv36q/4/

我所做的只是将一些transition 添加到.thumbs li a div.text。在这种特殊情况下，所有在悬停时发生变化的属性都是 0.3s。

该解决方案显然没有考虑所有可能的过渡和场景。它在这里让您了解您需要做什么。

编辑： https://jsfiddle.net/fhqxv36q/7/

当鼠标移出时，这会消除过渡效果。

在此处了解有关转换的更多信息 - https://developer.mozilla.org/en/docs/Web/CSS/transition

Answer 2

这个应该完全符合您的要求。

将过渡添加到元素及其:hover 状态 + 修复了它引起的其他一些问题。

https://jsfiddle.net/fhqxv36q/5/