Подробное описание и демонстрацией работы эффекта наведения под номером №18 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 18
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <div class="box-img"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-18/img-1.jpg" alt=""> <span class="over-layer"></span> </div> <div class="box-content"> <h3 class="title">Lorem ipsum dolor</h3> <p class="description"> Lorem ipsum dolor consectetur adipisicing elit. Ipsa, tempor ibus sit amet, consectetur adipisicing elit. Ipsa, temporibus? </p> <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; border:3px solid #e74c3c; } .box .box-img img{ width:100%; height: auto; transform:scale(1,1); transition:all 0.50s ease 0s; } .box:hover .box-img img{ transform:scale(1.1,1.1); } .box .box-img .over-layer{ width:100%; height:100%; display: block; opacity:0; position: absolute; top:0; background:rgba(234, 97, 83,0.8); transition:all 0.50s ease 0s; } .box:hover .over-layer{ opacity:1; } .box .box-content{ position: absolute; top:0; width:100%; height:100%; opacity:0; padding:5%; text-align:center; transition: all 0.50s ease 0s; } .box:hover .box-content{ opacity:1; } .box .title{ color:#fff; font-size:22px; margin-bottom:15px; text-transform:capitalize; } .box .description{ color:#fff; font-size:15px; margin-bottom:20px; } .box .links{ padding:0; margin:0; } .box .links li{ display:inline-block; list-style:none; margin-right:15px; } .box .links li a{ width: 35px; height: 35px; line-height: 35px; display: block; border-radius:10%; color:#e74c3c; background:#fff; } .box .links li a i{ transform: scale(1,1); transition: transform 0.50s ease; } .box .links li a:hover i{ transform:scale(1.2,1.2); } @media only screen and (max-width: 990px) { .box{ margin-bottom: 20px; } } @media only screen and (max-width: 479px) { .box .title{ margin-top: 0; } .box .description{ margin-bottom: 10px; } }