
Подробное описание и демонстрацией работы эффекта наведения под номером №24 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
html разметка для реализации данного эффекта<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-24/img-1.jpg" alt=""> <div class="over-layer"> <ul class="links"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position:relative; border: 4px solid #777; } .box img{ width:100%; height: auto; } .box .over-layer{ background:rgba(132, 135, 183,0.9); width:100%; height:100%; position: absolute; top:0; left:0; opacity:0; transition: all 0.40s linear; } .box .links{ position: relative; top:42%; margin:0; padding:0; text-align:center; } .box .links li{ display:inline-block; list-style: none; margin-right:5px; } .box .over-layer .links li a{ width: 45px; height: 45px; line-height: 42px; border-radius: 50%; color:#fff; border: 2px solid #fff; transition: all 0.40s linear; } .box .links li a:hover{ text-decoration:none; background:#fff; color:#7d7bac; } .box:hover .over-layer, .box:hover .links li a{ opacity:1; } .box .links li .fa-search{ transform: translateX(-70px) rotate(-350deg); transition: all 0.20s linear; } .box .links li .fa-link{ transform: translateX(70px) rotate(-350deg); transition: all 0.20s linear; } .box:hover .links li .fa-search, .box:hover .links li .fa-link{ transform: translateY(0px) rotate(0deg); } @media only screen and (max-width: 990px) { .box{ margin-bottom:15px; } }