Плавное появление текста при наведении на картинку

Всем привет друзья. Дело было уже как дык две или три а может больше недель. Захотелось сделать для вас шаблончик на DLE, но всё лень и незнание верстки ( а учиться лень) вводят меня в заблуждение. Много времени уходит на то , чтобы что то подогнатъ. Благо bootstrap выручает уже готовыми заготовками. Но все же иногда хочется что то изменить, сделать красивее или применить какой либо hover эффект.

 Так было и в моем случае. Была сделана короткая новость соответственно с использованием bootstrap card , а вот заголовок не хотелось выносить в хедер и решил сделать его поверх картинки, для того , что бы можно было использовать его всю длину. При выносе в хедер при разных длинах заголовков блоки становились разной высоты. Не будем вдаваться в подробности как в бутстрап сделать блоки одинаковой высоты  есть несколько способов. Можете на сайте поискать. Ну да ладно немного отошли от темы. Мы то говорим о том как сделать красивы эффект на чистом CSS . Эффект появления текста при наведении курсора на картинку на css. Данный hover эффект выглядит следующим образом , при наведении курсора на изображение заголовок и описание плавно выезжает на нее. Самое интересное то что описание и заголовок имеют различные , независимые блоки. Эффект прост , подойдёт для любых сайтов движков.  И так непосредственно наши стили для создания эффекта выдвигающего текста по верх картинки:

<style type="text/css">
.cool_img {
    display: inline-block;
    position: relative;
    text-align: center;
    overflow: hidden;
    border-radius: 5px;
}
 
.cool_img .info {
    position: absolute;
    bottom: 0;
}
 
.cool_img .info span {
    display: block;
    position: relative;
    top: 130px;
    color: #FFFFFF;
    background: #000000;
    transition-delay: 0;
    transition-duration: 0.3s;
}
 
.cool_img .info .info_title {
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    opacity: 0.8;
}
 
.cool_img .info .info_text {
    font-size: 12px;
    padding: 10px;
    opacity: 0.6;
}
 
.cool_img:hover .info span, .cool_img:focus .info span {
    top: 0;
}
 
.cool_img:hover .info .info_title {
    transition-delay: 0.15s;
}
 
.cool_img:hover .info .info_text {
    transition-delay: 0.25s;
}
</style>

Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition 

Непосредственно сам HTML

<a class="cool_img" href="#">
    <img src="images/hover_01.jpg">
    <div class="info">
        <span class="info_title">Снеговик</span>
        <span class="info_text">Стилизованная снежная фигура человека.
        Зимняя забава, зародившаяся в древние времена.</span>
    </div>
</a>

Если не предполагается использовать картинку в качестве ссылки, то тег а можно заменить на блочный элемент div

Ну вот вроде и все, возможно кому и пригодится.