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

Williamson
заговолокerLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit.
Read More
Kristiana
Web DeveloperLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit.
Read More
Steve Thomas
Graphic DesignerLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit.
Read More<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-74/img-1.jpg"> <div class="box-heading"> <h3 class="title">Williamson</h3> <span class="post">web designer</span> </div> <div class="boxContent"> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit. </p> <a href="#" class="read">Read More <i class="fa fa-angle-right"></i></a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-74/img-2.jpg"> <div class="box-heading"> <h3 class="title">Kristiana</h3> <span class="post">Web Developer</span> </div> <div class="boxContent"> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit. </p> <a href="#" class="read">Read More <i class="fa fa-angle-right"></i></a> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position: relative; overflow: hidden; box-shadow: 0 0 5px #555; } .box img{ width: 100%; height: auto; } .box .box-heading{ width: 90%; position: absolute; bottom: 25px; left: 5%; background: rgba(7, 185, 244,0.8); padding: 10px 60px 10px 25px; color: #fff; transition: all 0.3s ease 0s; } .box:hover .box-heading{ left: 100%; } .box .box-heading:after{ content: "f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 40px; height: 40px; line-height: 40px; position: absolute; top: 13px; right: 11px; background: #20211c; font-size: 30px; color: #fff; text-align: center; } .box .title{ margin: 0; font-size: 18px; font-weight: bold; } .box .post{ display: block; font-size: 14px; color: #fff; text-transform: capitalize; margin-top: 5px; } .box .boxContent{ width: 100%; height: 100%; position: absolute; top: 0; left: -100%; padding: 30px 35px; background: rgba(7, 185, 244,0.8); transition: all 0.3s ease 0s; } .box:hover .boxContent{ left: 0; } .box .description{ font-size: 14px; color: #fff; line-height: 25px; } .box .read{ display: inline-block; padding: 10px 20px; background: #20211c; font-size: 14px; font-weight: 700; color: #fff; margin-top: 20px; transition: all 0.3s ease 0s; } .box .read:hover{ text-decoration: none; background: #fff; color: #3fc9f7; } .box .read i{ font-size: 20px; font-weight: 700; margin-left: 10px; } @media only screen and (max-width: 990px){ .box{ margin-bottom: 20px; } } @media only screen and (max-width: 479px){ .box .boxContent{ padding: 10px; } .box .read{ margin-top: 10px; } }