
Подробное описание и демонстрацией работы эффекта наведения под номером №106 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
<div class="demo"> <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-106/img-1.jpg" alt=""/> <div class="box-content"> <h3 class="title">Williamson</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.</p> <a href="#" class="read-more">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-106/img-2.jpg" alt=""/> <div class="box-content"> <h3 class="title">Kristiana</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
body{ background: #212121; } .box{ background: #053a5c; overflow: hidden; position: relative; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .box img{ width: 100%; height: auto; -webkit-transition: all 0.35s ease 0.2s; transition: all 0.35s ease 0.2s; } .box:hover img{ -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation: loading-1 0.45s linear forwards; animation: loading-1 0.45s linear forwards; } .box .box-content{ width: 100%; padding: 0 30px; color: #fff; position: absolute; top: 50%; left: 0; -webkit-transform: scale(0.5) translate(0%, -50%); transform: scale(0.5) translate(0%, -50%); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0; z-index: 1; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .box:hover .box-content{ opacity: 1; -webkit-transform: scale(1) translate(0, -50%); transform: scale(1) translate(0, -50%); -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .box .title{ font-size: 24px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px 0; } .box .description{ font-size: 16px; font-weight: 500; margin: 0 0 15px; } .box .title, .box .description{ line-height: 24px; } .box .read-more{ display: inline-block; border: 2px solid #fff; padding: 8px 16px; font-size: 16px; color: #fff; -webkit-transition: all 0.35s ease 0s; transition: all 0.35s ease 0s; } .box .read-more:hover{ background: #fff; color: #053a5c; } @-webkit-keyframes loading-1{ 50%{ -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100%{ -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes loading-1{ 50%{ -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100%{ -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @media only screen and (max-width: 990px){ .box{ margin-bottom: 30px; } } @media only screen and (max-width: 360px){ .box .title{ font-size: 18px; } .box .read-more{ padding: 3px 16px; } }