Подробное описание и демонстрацией работы эффекта наведения под номером №65 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-65/img-1.jpg"/> <div class="boxContent"> <h3 class="title">Williamson</h3> <span class="post">Web Designer</span> <ul class="links"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-65/img-2.jpg"/> <div class="boxContent"> <h3 class="title">Kristiana</h3> <span class="post">Web Developer</span> <ul class="links"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position: relative; overflow: hidden; } .box:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(177, 208, 113, 0.8); opacity: 0; transition: all 300ms ease-in-out 0s; } .box:hover:before{ opacity: 1; } .box img{ width: 100%; height: auto; } .box .boxContent{ width: 100%; height: 100%; text-align: center; position: absolute; top: 0; left: 0; color: #fff; z-index: 1; } .box .title{ font-size: 20px; text-transform: uppercase; position: relative; top: 18%; transform: scale(5); opacity: 0; transition: all 0.3s ease-in-out 0.1s; } .box .post{ display: block; font-size: 16px; font-style: italic; position: relative; top: 18%; transform: scale(5); opacity: 0; transition: all 0.3s ease-in-out 0.2s; } .box:hover .title, .box:hover .post{ opacity: 1; transform: scale(1); } .box .links{ padding: 0; list-style: none; position: relative; top: 23%; transform: scale(5); opacity: 0; transition: all 0.3s ease-in-out 0.1s; } .box:hover .links{ opacity: 1; transform: scale(1); transition-delay: 0.3s; } .box .links li{ display: inline-block; margin-right: 20px; } .box .links li:last-child{ margin-right: 0; } .box .links li a{ display: block; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; font-size: 20px; color: #fff; border: 1px solid #fff; } @media only screen and (max-width: 990px){ .box{ margin-bottom: 20px; } }