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

Заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.
<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-41/img-1.jpg" alt=""/> <div class="box-content"> <h3 class="title">Web designer</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.</p> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box { overflow: hidden; position: relative; box-shadow:0 0 5px #808080; } .box:before, .box:after{ content: ""; position: absolute; bottom: 0; left: 0; width:50%; height:100%; background: #85b141; transform: translateY(-100%); transition: all 0.3s ease 0s; } .box:after{ left:50%; transform: translateY(100%); transition-delay: 0.1s; } .box:hover:after, .box:hover:before{ transform: translateY(0); } .box img{ width: 100%; height:auto; } .box .box-content{ width: 100%; position: absolute; top: 30px; left: 0; padding: 40px 20px; color:#fff; text-align:center; z-index: 1; } .box .title{ font-size:24px; text-transform: uppercase; margin: 0 0 20px 0; transform: translateX(-110%); transition: all 0.40s linear 0.1s; } .box .description{ font-size:14px; transform: translateX(110%); transition: all 0.40s linear 0.1s; } .box:hover .title, .box:hover .description{ transform:translateX(0%); transition-delay: 0.35s; } @media only screen and (max-width:990px) { .box{ margin-bottom:20px; } } @media only screen and (max-width:479px) { .box .box-content{ padding: 10px 20px; } }