<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-3 text"> <img class="img-responsive" src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" "> <div class="middle"> <div class="text">Hale Nur Çalışkan</div> </div> </div> <div class="col-md-3 text"> <img class="img-responsive" src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" "> <div class="middle"> <div class="text">Hale Nur Çalışkan</div> </div> </div> <div class="col-md-3 text"> <img class="img-responsive" src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" "> <div class="middle"> <div class="text">Hale Nur Çalışkan</div> </div> </div> <div class="col-md-3 text"> <img class="img-responsive" src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" "> <div class="middle"> <div class="text">Hale Nur Çalışkan</div> </div> </div> </div> </div>

img { -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */ filter: blur(2px); opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .row{ position:relative; } img:hover{ filter:none; opacity: 0.5; } .middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .text:hover .middle { opacity: 1; } .text:hover { color: white; font-size: 16px; color:black; }