<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 ----------> <div class="container"> <div class="row"> <div class="col-sm-6 covered-card"> <article class="covered-card"> <div class="covered-card-content"> <img width="32px" src="http://www.freeiconspng.com/uploads/video-play-icon-11.png"> <span>Başbakan YILDIRIM, GENÇLİK KOLLARI BÜYÜK TÜRKİYE’NİN GÜÇLÜ GENÇLİĞİ GELİŞİM KAMPI’NDA KONUŞTU</span> </div> </article> <figure class="covered-card" style="background-image: url(http://136.243.1.253/~creolitic/bootsnipp/home.jpg)"></figure> </div> </div> </div>

div.covered-card { position: relative; overflow: hidden; min-height: 200px; display:table; } article { position: relative; z-index: 2; color: #fff; display: table-footer-group; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .covered-card-content span { font-size: 13px; text-transform: uppercase; } .covered-card-content svg { width: 18px; height: 18px; margin-right: 10px; vertical-align: bottom; } figure.covered-card { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center; background-size: cover; opacity: 1; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }