Transparent Overlay Experiement

A little test for a case where an overlay image needs to appear on top of a thumbnail image while making sure that the thumbnail is still clickable.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Transparent Overlay Experiement </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrap">
  <div class="thumb">
    <img src="http://placehold.it/120x70" />
    <h2 href="#">Video Title</h2>
    <p>Here is a nice video for you. See how nice and pretty?</p>
    <div class="overlay"></div>
  </div>
  <div class="thumb">
    <img src="http://placehold.it/120x70" />
    <h2 href="#">Video Title</h2>
    <p>Here is a nice video for you. See how nice and pretty?</p>
    <div class="overlay"></div>
  </div>
  <div class="thumb">
    <img src="http://placehold.it/120x70" />
    <h2 href="#">Video Title</h2>
    <p>Here is a nice video for you. See how nice and pretty?</p>
    <div class="overlay"></div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.wrap { overflow: hidden; }

.thumb { position: relative; display: block; width: 120px; float: left; padding: 10px; margin-right: 35px; cursor: pointer; }

.clicked { background: orange; }

.overlay { display: none; background: url(http://dev1.advisorone.com/microsites/retirement-planning-center/img/icon-play.png) no-repeat; }

.on .overlay { display: block; position: absolute; width: 120px; height: 70px; 
  top: 10px; left: 10px; }
/* Downloaded from https://www.codeseek.co/ */
var thumb = $('.thumb');

thumb.hover(
  function(){
  $(this).toggleClass('on');
});

thumb.on('click', function(){
  thumb.removeClass('clicked');
  $(this).addClass('clicked');
});

This awesome code ( Transparent Overlay Experiement ) is write by Brandon Flynn, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Brandon Flynn