Question

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

内容会持续多长时间......

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

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

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

非常感谢你的帮助