Подробное описание и демонстрацией работы эффекта наведения под номером №22 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 22
<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-22/img-1.jpg" alt=""> <a href="#" class="over-layer"> <h4 class="post">Web designer</h4> <span class="title">Williamson</span> </a> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ border:4px solid #fff; box-shadow:0 0 10px #808080; position: relative; text-align:center; } .box img{ width:100%; height: auto; } .box .over-layer{ position: absolute; width:100%; height:100%; top:0; left:0; opacity:0; background:rgba(0, 0, 0,0.8); transition: all 0.50s ease; } .box:hover .over-layer{ opacity:1; } .box .post{ position:relative; top:35%; color:#fff; opacity:0; text-transform: uppercase; transition: all 0.50s ease 0s; } .box:hover .over-layer .post{ opacity:1; top:40%; } .box .title{ position:relative; bottom:-45%; opacity:0; font-size:18px; color:#808080; transition: all 0.50s ease 0.4s; } .box:hover .over-layer .title{ opacity:1; bottom:-40%; } @media only screen and (max-width: 990px){ .box{ margin-bottom:20px; } }