Smooth transitions using css - css

Question

I want to manage hover event just like in the linked fiddle, assuming I don't know how long the content would be...
My question is: how can I add smooth transitions while hovering?
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>
Besides, It would be great that the animation launches while hovering the picture...
I'd like to avoid using js, if possible... But if not, well... why not.
Thanks a lot for your help

Answer 1

Here's your updated fiddle with smooth transition on hover.
https://jsfiddle.net/fhqxv36q/4/
All I have done is added some transition to .thumbs li a div.text. In this particular case, it's 0.3s for all properties that are changing on hover.
The solution, obviously doesn't take into consideration all the possible transitions and scenarios. It is here to give you an idea of what you need to do.
EDIT :
https://jsfiddle.net/fhqxv36q/7/
This takes away the transition effect when you mouse out.
Learn more about transitions here - https://developer.mozilla.org/en/docs/Web/CSS/transition

Answer 2

This one should do exactly what you want.
Adding the transition to both the element and its :hover state + fixed some other issues it caused.
https://jsfiddle.net/fhqxv36q/5/