ARTICLES > CSS

[CSS] Play button overlay on image Turn Back

2019-06-13 16:53:01

 
HTML:
<div class="video-thumbnail">
  <img src="video_cover.jpg" alt="">
</div>
 
CSS:
 
.video-thumbnail {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
 
.video-thumbnail::before {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    content: "f144";
    font-family: FontAwesome;
    font-size: 60px;
    color: #fff;
    opacity: 0.8;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
 
.video-thumbnail:hover::before {
    color: #eee;
}
 
Remark*
You need to include font awesome framework.
Turn Back