<div class="container">
<div class="header__video">
<a href="">
<img class="header__video_img"
src= "https://i.postimg.cc/RZkdzpVW/video.png" alt="">
</a>
</div>
</div>
.container {
max-width: 700px;
margin: 0 auto;
}
.header__video {
position: relative;
border: 1px solid transparent;
transition: all 0.6s ease 0s;
cursor: pointer;
border-radius: 5px;
.header__video_img {
border-radius: 5px;
}
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
opacity: 0.9;
border-radius: 5px;
}
&:after {
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('https://i.postimg.cc/4N82j19c/icon-play.png') center / auto no-repeat;
opacity: 0;
transition: all 0.6s ease 0s;
}
&:hover {
border: 1px solid #000;
&:after {
opacity: 1;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.