Подробное описание и демонстрацией работы эффекта наведения под номером №35 для бибилиотеки 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-35/img-1.jpg" alt=""/> <div class="box-content"> <h3 class="title">Web designer</h3> </div> <div class="option"> <span class="link"> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-search-minus"></i></a> <a href="#"><i class="fa fa-search-plus"></i></a> <a href="#"><i class="fa fa-ship"></i></a> </span> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position: relative; } .box img{ width: 100%; height:auto; } .box .box-content{ position: absolute; top:0; width: 100%; height: 100%; background: rgba(0,35,38,0.4); } .box .title{ position: absolute; top:35%; color:#fff; width: 100%; text-align: center; text-transform: capitalize; transform:scale(1,1); opacity: 1; transition: all 0.35s ease 0s; -webkit-transition: all 0.35s ease 0s; -moz-transition: all 0.35s ease 0s; -ms-transition: all 0.35s ease 0s; -o-transition: all 0.35s ease 0s; } .box:hover .title{ transform:scale(0.5,0.5); opacity: 0; } .box .option { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); } .box .option:before { content: ""; width: 130px; height: 130px; position: absolute; top: 50%; left: 50%; border: 2px solid #fff; opacity: 0; transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; } .box:hover .option:before { opacity: 1; transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); } .box .link{ width: 70px; display: block; font-size: 20px; line-height: 35px; } .box .link a{ color: #fff; margin: 0 5px; } .box .link a:hover{ color:#d39a00; } .box .link a i { opacity: 0; transition: all 0.3s ease 0s; } .link a:first-child i{ transform: translate3d(-40px,-40px,0); } .link a:nth-child(2) i { transform: translate3d(40px,-40px,0); } .link a:nth-child(3) i { transform: translate3d(-30px,40px,0); } .link a:nth-child(4) i { transform: translate3d(40px,40px,0); } .box:hover .link i{ transform: translate3d(0,0,0); opacity: 1; } @media only screen and (max-width: 990px){ .box{ margin-bottom: 20px; } }