position: relative;
top: 50%;
transform: translateY(-50%);<div class="qwe">
qweqwe
</div>
<style>
.qwe{
display: inline-block;
padding: 20px;
border: 2px solid lightgray;
position: relative;
}
.qwe:before,
.qwe:after{
content: '';
display: block;
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
}
.qwe:before{
border-left: 0 solid green;
border-bottom: 0 solid green;
}
.qwe:after{
border-top: 0 solid green;
border-right: 0 solid green;
}
.qwe:hover:before,
.qwe:hover:after{
border-width: 2px;
height: calc(100% + 4px);
width: calc(100% + 4px);
}
.qwe:hover:before{
transition: height 1s linear , width 1s 1s linear ;
}
.qwe:hover:after{
transition: width 1s linear , height 1s 1s linear ;
}
</style>$('img').each(function () {
$(this).hover(
function () {
$(this).css('z-index', 99999);
$('body').addClass('hover_img');
},
function () {
$(this).css('z-index', 1);
$('body').removeClass('hover_img');
});
});
body.hover_img{
position: relative;
&:before{
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 99998;
}
}
img{
position: relative;
}h2 {
position: relative;
display: inline-block;
background: #fff;
padding: 0 20px;
}
h2:before {
content: '';
position: absolute;
width: 200%;
height: 2px;
background: red;
top: 15px;
left: -50%;
z-index: -1;
}.hover:hover{
animation: hover .6s;
}
@keyframes hover {
50% { transform: scale(0.8); }
}