Cacher is the code snippet organizer for pro developers

.qwp-thumbnail {
  border-radius: @border-radius-xs;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.qvp-video-thumb {
  .qwp-thumbnail;
  margin-top: 0 0 @margin-sm 0;
  background-color: @color-0;

  @media (max-width: 767px) {
    img {
      max-width: inherit;
      width: 100%;
      min-width: 100%;
    }
  }

  span {
    height: 56px;
    width: 47px;
    background-image: url("@{images}/play_youtube.png");
    
    display: block;
    position: absolute;
    left: 50%;
    opacity: 0;
    top: 60%;
    .transform(translateX(-50%) translateY(-50%));
    transition: all .3s ease-in-out;
  }

  img {
    opacity: 1;
    transition: all .3s ease-in-out;
  }

  &:hover {
    span {
      opacity: 1;
      top: 50%;
    }
    img {
      opacity: .3;
    }
  }
}