
Подробное описание и демонстрацией работы эффекта наведения под номером №91 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
<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-91/img-1.jpg"/> <div class="box-icon"> <div class="box-inner-icon"> <div class="box-inner left-box"></div> <div class="box-inner top-box"></div> <div class="box-inner right-box"></div> <div class="box-inner bottom-box"></div> <div class="icon"><i class="fa fa-crosshairs"></i></div> </div> </div> <div class="box-content"> <h4 class="title">willimson</h4> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula est a porttitor condimentum.</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-91/img-2.jpg"/> <div class="box-icon"> <div class="box-inner-icon"> <div class="box-inner left-box"></div> <div class="box-inner top-box"></div> <div class="box-inner right-box"></div> <div class="box-inner bottom-box"></div> <div class="icon"><i class="fa fa-crosshairs"></i></div> </div> </div> <div class="box-content"> <h4 class="title">Kristiana</h4> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula est a porttitor condimentum.</p> <a class="read-more" href="#">read more</a> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ overflow: hidden; position: relative; } .box img{ width: 100%; height: auto; } .box .box-icon{ width: 180px; height: 120px; background: rgba(0,0,0,0.7); position: absolute; top: 33%; left: 0; right: 0; margin: auto; -moz-transition: all 0.2s linear 0.65s; -o-transition: all 0.2s linear 0.65s; -ms-transition: all 0.2s linear 0.65s; -webkit-transition: all 0.2s linear 0.65s; transition: all 0.2s linear 0.65s; } .box:hover .box-icon{ -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .box .box-inner-icon{ width: 82px; height: 82px; margin: auto; position: relative; top: 19px; opacity: 1; } .box .box-inner{ width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 0; left: 0; background: transparent; } .box .left-box{ border-left: 2px solid #fff; -moz-transition: border-color 0.3s linear 0s; -o-transition: border-color 0.3s linear 0s; -ms-transition: border-color 0.3s linear 0s; -webkit-transition: border-color 0.3s linear 0s; transition: border-color 0.3s linear 0s; } .box .top-box{ border-top: 2px solid #fff; -moz-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -o-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -ms-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -webkit-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } .box .right-box{ border-right: 2px solid #fff; -moz-transition: border-color 0.3s linear 0s; -o-transition: border-color 0.3s linear 0s; -ms-transition: border-color 0.3s linear 0s; -webkit-transition: border-color 0.3s linear 0s; transition: border-color 0.3s linear 0s; } .box .bottom-box{ border-bottom: 2px solid #fff; -moz-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -o-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -ms-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -webkit-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } .box:hover .left-box, .box:hover .right-box{ border-color: transparent; } .box:hover .top-box, .box:hover .bottom-box{ border-radius: 0; left: 500%; opacity: 0; } .box:hover .top-box{ top: 91%; } .box .icon{ position: absolute; top: 20px; left: 27px; color: #fff; font-size: 30px; -moz-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -o-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -ms-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; -webkit-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } .box:hover .icon{ left: -500%; opacity: 0; } .box .box-content{ width: 100%; height: 100%; text-align: center; color: #fff; padding: 15% 30px 25px 30px; position: absolute; top: -100%; left: 0; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .box:hover .box-content{ top: 0; -moz-transition-delay: 0.75s; -o-transition-delay: 0.75s; -ms-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } .box .title{ font-size: 22px; font-weight: 400; text-transform: uppercase; background: rgba(0,0,0,0.7); padding: 6px 0; position: relative; } .box .title:before{ content: ""; display: block; width: 0; height: 0; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .box .description{ font-size: 14px; font-weight: 400; background: rgba(0,0,0,0.8); margin-top: 40px; padding: 6px 10px; } .box .read-more{ display: inline-block; font-size: 15px; color: #fff; background: #79801b; border-radius: 5px; margin-top: 30px; padding: 7px 20px; text-transform: capitalize; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; } } @media only screen and (max-width:359px){ .box .box-content{ padding-top: 5%; } }