пример выше на скрине, а тут код
ХТМЛ:
<div class="media-big-cont video "> <a href="/articles/video/Savchenko_ne_dozhivet_do_sleduyuschego_zasedaniya_suda_–_ee_zayavlenie-89460/"> <img width="540" height="380" alt="" src="/upload/iblock/5ab/cdecmeeaczyeyaug 2.jpg"> <div class="overlay"> <i></i> <h3>Савченко не доживет до следующего заседания суда – её заявление</h3> </div> </a> </div>
ЦСС:
.media-big-cont { height: 380px; position: relative; width: 540px; } .media-big-cont > a { display: block; height: 100%; position: relative; width: 100%; } .media-big-cont img { position: relative; z-index: 1; } .media-big-cont .overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); left: 0; padding: 20px; position: absolute; top: 0; width: 100%; z-index: 999; } .media-big-cont h3 { color: #ffffff; float: left; font-size: 23px; left: 70px; max-width: 450px; top: 17px; z-index: 9999; }