<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> <div class="row"> <div class="col-sm-3"> <div class="owl-carousel"> <div class="post-slide"> <div class="post-img"> <img class="img-responsive" src="http://lorempixel.com/400/200" alt="loraim"> <div class="over-layer"> <ul class="post-link"> <li> <a href="#" class="fa fa-link"></a> </li> </ul> </div> <div class="post-date"> <span class="date">25.</span> <span class="month">8.</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Svědčí ke vím takový teď</a> </h3> <p class="post-description">Děti ty rozpoznat pár oteplováním lidský, nám a větvičky odlišná slovy vlivem mi za obdobou prvním. Umějí území teorií a označených nejznámějším dotknout</p> <a href="#" class="read-more">Celý článek</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="owl-carousel"> <div class="post-slide"> <div class="post-img"> <img class="img-responsive" src="http://lorempixel.com/400/200" alt="loraim"> <div class="over-layer"> <ul class="post-link"> <li> <a href="#" class="fa fa-link"></a> </li> </ul> </div> <div class="post-date"> <span class="date">25.</span> <span class="month">8.</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Svědčí ke vím takový teď</a> </h3> <p class="post-description">Děti ty rozpoznat pár oteplováním lidský, nám a větvičky odlišná slovy vlivem mi za obdobou prvním. Umějí území teorií a označených nejznámějším dotknout</p> <a href="#" class="read-more">Celý článek</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="owl-carousel"> <div class="post-slide"> <div class="post-img"> <img class="img-responsive" src="http://lorempixel.com/400/200" alt="loraim"> <div class="over-layer"> <ul class="post-link"> <li> <a href="#" class="fa fa-link"></a> </li> </ul> </div> <div class="post-date"> <span class="date">25.</span> <span class="month">8.</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Svědčí ke vím takový teď</a> </h3> <p class="post-description">Děti ty rozpoznat pár oteplováním lidský, nám a větvičky odlišná slovy vlivem mi za obdobou prvním. Umějí území teorií a označených nejznámějším dotknout</p> <a href="#" class="read-more">Celý článek</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="owl-carousel"> <div class="post-slide"> <div class="post-img"> <img class="img-responsive" src="http://lorempixel.com/400/200" alt="loraim"> <div class="over-layer"> <ul class="post-link"> <li> <a href="#" class="fa fa-link"></a> </li> </ul> </div> <div class="post-date"> <span class="date">25.</span> <span class="month">8.</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Svědčí ke vím takový teď</a> </h3> <p class="post-description">Děti ty rozpoznat pár oteplováním lidský, nám a větvičky odlišná slovy vlivem mi za obdobou prvním. Umějí území teorií a označených nejznámějším dotknout</p> <a href="#" class="read-more">Celý článek</a> </div> </div> </div> </div> </div>

.post-slide { margin: 0 15px; position: relative; background: #FFF; } .post-slide .post-img { position: relative; overflow: hidden; } .post-slide .post-img img { width: 100%; height: auto; } .post-slide .over-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.6); transition: all 0.30s ease; } .post-slide:hover .over-layer { opacity: 1; } .post-slide .post-link { margin: 0; padding: 0; position: relative; top: 45%; text-align: center; } .post-slide .post-link li { display: inline-block; list-style: none; margin: -9px 0 0; } .post-slide .post-link li a { color: #FFF; font-size: 39px; } .post-slide .post-link li a:hover { color: #FF8B3D; text-decoration: none; } .post-slide .post-date { position: absolute; top: 10%; left: 4%; } .post-slide .date { display: inline-block; border-radius: 3px 0 0 3px; padding: 5px 10px; color: #FFF; font-size: 20px; font-weight: bold; text-align: center; background: #333; float: left; } .post-slide .month { display: inline-block; border-radius: 0 3px 3px 0; padding: 5px 13px; color: #111; font-size: 20px; font-weight: bold; background: #FF8B3D; } .post-slide .post-content { padding: 30px; background-color: #F5F5F6; } .post-slide .post-title { margin: 0 0 15px 0; } .post-slide .post-title a { font-size: 17px; font-weight: bold; color: #333; display: inline-block; transition: all 0.3s ease 0s; } .post-slide .post-title a:hover { text-decoration: none; color: #FF8B3D; } .post-slide .post-description { font-size: 14px; line-height: 22px; color: #444444; padding: 0 0 10px 0; } .post-slide .read-more { color: #333; font-size: 14px; font-weight: bold; text-transform: uppercase; position: relative; transition: color 0.20s linear; } .post-slide .read-more:hover { text-decoration: none; color: #FF8B3D; } .post-slide .read-more:after { content: ""; position: absolute; width: 30%; display: block; border: 1px solid #FF8B3D; transition: all 0.30s ease; } .post-slide .read-more:hover:after { width: 100%; } @media only screen and (max-width: 479px) { .post-slide .month { font-size: 14px; } .post-slide .date { font-size: 14px; } } div.clanky .row { padding-top: 35px; }