Create a play button overlay with a pseudo-element

Today I learned how to create a play button overlay on a video thumbnail.


The trick is to use a pseudo-element. According to the Mozilla CSS documentation:

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.

Using the ::before pseudo-element I was able to add the styled element responsible for the overlay.

<div class="placeholder-video">
  <img src="https://i.ytimg.com/vi/HOK4aBYNh3s/maxresdefault.jpg">
</div>
.placeholder-video {
  position: relative;
  width: 854px;
  height: 480px;
}
.placeholder-video img {
 width: 854px;
 height: 480px;
 padding: 0px;
}
.placeholder-video:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/images/play_button_overlay.jpg");
  opacity: .50;
}
.placeholder-video:hover:before {
  opacity: .55;
}