<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="col-md-12 text-center"><h2>Yaklaşan Etkinlikler</h2></div> <div class="col-sm-4"> <div class="thumbnail"> <div class="overlay"> <i class="fa fa-share md"></i> </div> <img class="img-responsive" alt="a" src="http://www.projen.com.tr/images/anasayfa/referans/Duyar.jpg"> </div> <div class="row"> <div class="col-md-4"> <h3><span class="label label-info">9 Mayıs 2017</span></h3> </div> <div class="col-md-8"> <strong>Duyar Kimya & Planner Toplantısı</strong><br> <em>Duyar Kimya Işıkkent</em><br> <span class="small">15:00</span> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <div class="overlay"> <i class="fa fa-share md"></i> </div> <img class="img-responsive" alt="a" src="https://media.licdn.com/media/p/2/005/04f/35a/1a15e6e.png"> </div> <div class="row"> <div class="col-md-4"> <h3><span class="label label-info">9 Mayıs 2017</span></h3> </div> <div class="col-md-8"> <strong>İş Görüşmesi & Santral Center</strong><br> <em>Işıkkent Duyar Kimya </em><br> <span class="small">13:00</span> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <div class="overlay"> <i class="fa fa-share md"></i> </div> <img class="img-responsive" alt="a" src="http://www.projen.com.tr/images/anasayfa/referans/konica-minolta.jpg"> </div> <div class="row"> <div class="col-md-4"> <h3><span class="label label-info">12 Mayıs 2017</span></h3> </div> <div class="col-md-8"> <strong>Sevk Emri</strong><br> <em>Projen Ofis</em><br> <span class="small">15:00</span> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Roboto); body,h1,h2 { font-family: 'Roboto', sans-serif; } .thumbnail { position: relative; float: left; width: 100px; height: 100px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .overlay:hover { opacity: 1; cursor: pointer; } .overlay { position: absolute; width: 100%; height: 100%; opacity: 0; transition: all 0.35s ease; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -o-transition: all 0.35s ease; -ms-transition: all 0.35s ease; border-radius: inherit; left: 0; top: 0; bottom: 0; right: 0; } .overlay { background-color: rgba(22,154,200,0.75); }