<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- instagram: www.instagram.com/programmingtutorial site: programlamadersleri.net --> <section id="gallery"> <div class="container"> <div class="row"> <div class="col-lg-4 col-xs-12 img-space"> <div class="gallery"> <a href="https://images.pexels.com/photos/403571/pexels-photo-403571.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" target="_blank"> <img class="img-responsive" src="https://images.pexels.com/photos/403571/pexels-photo-403571.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> <span class="overlay">+</span> </a> </div> </div> <div class="col-lg-4 col-xs-12 img-space"> <div class="gallery"> <a href="https://images.pexels.com/photos/346731/pexels-photo-346731.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" target="_blank"> <img class="img-responsive" src="https://images.pexels.com/photos/346731/pexels-photo-346731.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> <span class="overlay">+</span> </a> </div> </div> <div class="col-lg-4 col-xs-12 img-space"> <div class="gallery"> <a href="https://images.pexels.com/photos/6332/coffee-cup-books-home.jpg?w=1260&h=750&auto=compress&cs=tinysrgb" target="_blank"> <img class="img-responsive" src="https://images.pexels.com/photos/6332/coffee-cup-books-home.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"/> <span class="overlay">+</span> </a> </div> </div> <div class="col-lg-6 col-xs-12 img-space"> <div class="gallery"> <a href="https://images.pexels.com/photos/2097/desk-office-pen-ruler.jpg?w=1260&h=750&auto=compress&cs=tinysrgb" target="_blank"> <img class="img-responsive" src="https://images.pexels.com/photos/2097/desk-office-pen-ruler.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"/> <span class="overlay2">+</span> </a> </div> </div> <div class="col-lg-6 col-xs-12 img-space"> <div class="gallery"> <a href="https://images.pexels.com/photos/276720/pexels-photo-276720.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" target="_blank"> <img class="img-responsive" src="https://images.pexels.com/photos/276720/pexels-photo-276720.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> <span class="overlay2">+</span> </a> </div> </div> </div> </section>

img{ width:100; } .gallery a { position: relative; display: block; } .overlay { background-color: rgba(0, 0, 0, 0.8); color: #fff; cursor: pointer; display: block; font-size: 100px; height: 100%; width: 100%; padding-top:40px; top: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; text-align: center; transition: all 1s ease; } .overlay2{ background-color: rgba(0, 0, 0, 0.8); color: #fff; cursor: pointer; display: block; font-size: 100px; height: 100%; width: 100%; padding-top:100px; top: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; text-align: center; transition: all 1s ease; } .gallery a:hover .overlay , .gallery a:hover .overlay2 { opacity: 0.8; } .img-space{ margin:20px 0px; }