Подробное описание и демонстрацией работы эффекта наведения под номером №21 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 21
Lorem ipsum dolor sit
Заголовок<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-21/img-1.jpg" alt=""> <div class="over-layer"> <a href="#" class="fa fa-search"></a> <a href="#" class="fa fa-link"></a> </div> </div> <div class="box-content"> <h2 class="title"><a href="#">Lorem ipsum dolor sit</a></h2> <span class="post">web designer</span> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position: relative; } .box .box-img{ overflow: hidden; position: relative; } .box .box-img img{ width:100%; height: auto; transform: scale(1,1); transition:transform 300ms ease-out 0s; } .box:hover .box-img img{ transform: scale(2,2); transition:transform 10s linear 0s; } .box .over-layer{ position: absolute; top:0; width:100%; height:100%; opacity:0; text-align: center; background:rgba(0, 0, 0,0.7); transition:opacity 0.50s ease ; } .box:hover .over-layer{ opacity:1; } .box .over-layer a{ position: relative; top:100%; padding:13px; color:#fff; margin-right: 10px; background: rgba(55, 30, 20,0.5); transition: all 0.50s linear 0s; } .box .over-layer a:hover{ background:#009CBF; text-decoration:none; } .box:hover .over-layer a{ top:45%; } .box .box-content{ position:absolute; top:100%; width:100%; height:50%; opacity:0; padding:7% 15%; background:#323232; transform:perspective(1000px) rotateX(180deg); transform-origin: 50% 0 0; transition:transform 0.80s ease,opacity 0.80s ease; } .box:hover .box-content{ opacity:1; z-index: 1; transform:perspective(1000px) rotateX(0deg); } .box .title{ margin:0; } .box .title a{ color:#fff; font-size:22px; text-transform: capitalize; transition: all 0.50s linear 0s; } .box .title a:hover{ text-decoration:none; color:#00a8e8; } .box .post{ color:#d3d3d3; text-align:left; margin-top: 10px; text-transform: capitalize; display: inline-block; } @media only screen and (max-width:990px) { .box { margin-bottom: 30px; } } @media only screen and (max-width:479px) { .box .box-content{ padding: 7%; } .box .box-content .title a{ font-size:15px; } }