
Подробное описание и демонстрацией работы эффекта наведения под номером №12 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 12

Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

Vestibulum vel arcu
Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?
<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-12/img-1.jpg" alt=""/> </div> <div class="content"> <h3 class="title">Lorem ipsum dolor</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position:relative; overflow: hidden; } .box .box-img img{ width:100%; height:auto; border-radius:50%; transform:rotate(0deg); transition:transform 0.30s ease; } .box:hover .box-img img{ transform:rotate(90deg); } .box .content{ position:absolute; top:100%; width: 100%; height: 100%; border-radius:50%; color:#fff; text-align:center; padding: 28% 3%; background:rgba(64, 212, 126,0.6); transition:all 0.5s ease 0s; } .box:hover .content{ top:0; } .box .title{ margin-bottom:5%; text-transform:uppercase; } .box .description{ font-size: 14px; } @media only screen and (max-width: 990px) { .box{ margin-bottom:20px; } }