Подробное описание и демонстрацией работы эффекта наведения под номером №95 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 95
willimson
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.
read moreKristiana
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.
read moreSteve Thomas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.
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-95/img-1.jpg" alt=""/> <div class="box-content"> <h4 class="title">willimson</h4> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.</p> <a class="read-more" href="#">read more</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-95/img-2.jpg" alt=""/> <div class="box-content"> <h4 class="title">Kristiana</h4> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.</p> <a class="read-more" href="#">read more</a> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ text-align: center; overflow: hidden; position: relative; box-shadow: 0 0 5px #a3a3a3; } .box:before, .box:after{ content: ""; width: 2px; height: 2px; border-radius: 50%; background: rgba(0,0,0,0.35); position: absolute; top: 50%; left: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .box:hover:before, .box:hover:after{ -webkit-transform: scale(400); -moz-transform: scale(400); -ms-transform: scale(400); -o-transform: scale(400); transform: scale(400); } .box:before{ -o-transition: all 0.5s linear 0.3s; -moz-transition: all 0.5s linear 0.3s; -ms-transition: all 0.5s linear 0.3s; -webkit-transition: all 0.5s linear 0.3s; transition: all 0.5s linear 0.3s; } .box:hover:before{ -moz-transition-delay: 0s; -webkit-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; } .box:after{ -o-transition: all 0.5s linear 0.6s; -moz-transition: all 0.5s linear 0.6s; -ms-transition: all 0.5s linear 0.6s; -webkit-transition: all 0.5s linear 0.6s; transition: all 0.5s linear 0.6s; } .box:hover:after{ -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .box img{ width: 100%; height: auto; } .box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent; color: #fff; padding-top: 25px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -ms-transition: all 0.3s linear 0s;; -o-transition: all 0.3s linear 0s;; -webkit-transition: all 0.3s linear 0s;; -moz-transition: all 0.3s linear 0s;; transition: all 0.3s linear 0s; z-index: 1; } .box:hover .box-content{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .box .title{ font-size: 21px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; } .box .description{ font-size: 14px; font-style: italic; padding: 0 10px; margin: 15px 0; } .box .read-more{ display: block; width: 120px; background: #178993; border-radius: 5px; font-size: 14px; color: #fff; text-transform: capitalize; padding: 10px 0; margin: 0 auto; } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; } } @media only screen and (max-width:479px){ .box .box-content{ padding-top: 0; } } @media only screen and (max-width:359px){ .box .title{ padding-bottom: 10px; } }