javascript - HTML: Show transparent cover on image and video

Question

I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.

Here is my code:

$(document).ready(function() {
  $('.cspn-show-on-hover').hover(

    function() {
      $(this).find('.cspn-cover').css('display', 'table-cell');
    },
    function() {
      $(this).find('.cspn-cover').css('display', 'none');
    },
  );
});

.cmedia-box {
  position: relative;
  display: table;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.cmedia {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.cdiv-show-on-hover {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cspn-show-on-hover {
  display: table;
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.cspn-cover {
  display: none;
  vertical-align: middle;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #6b478fb3;
  text-align: center;
  margin-bottom: 0rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<picture class="cmedia-box">
  <div class="cdiv-show-on-hover">
    <span class="cspn-show-on-hover">
      <span class="cspn-cover"><h1>Hello</h1></span>
    </span>
  </div>
  <img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>


<video class="cmedia-box" controls>
  <div class="cdiv-show-on-hover">
    <span class="cspn-show-on-hover">
      <span class="cspn-cover"><h1>Hello</h1></span>
    </span>
  </div>
  <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>

As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?

标签： javascriptjqueryhtmlcss

Answer 1

All you need is a wrapper:

.media-cover {
  display: inline-block;
  position: relative;
}

.media-cover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #6b478fb3;
  opacity: 0;
}

.media-cover:hover:after {
  opacity: 1;
}

<div class="media-cover">
  your media object here...
</div>

Here's an example with the media objects centered in a full screen parent:

.media-cover {
  position: relative;
  display: inline-block;
}
.center-me {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
  padding: 0 15%;
  border-bottom: 1px solid #eee;
}
.media-cover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /*delete this line to disable interaction with video/picture */
  background-color: #6b478fb3;
  opacity: 0;
  transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
  display: block;
  max-width: 100%;
}

.media-cover:hover:after {
  opacity: 1;
}

picture img {
  max-width: 100%;
  display: block;
}
body {margin: 0;}

<div class="center-me">
  <div class="media-cover">
    <picture class="cmedia-box">
      <img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
    </picture>
  </div>
</div>
<div class="center-me">
  <div class="media-cover">
    <video class="cmedia-box" controls>
    <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
  </div>
</div>