Transparent Overlay Experiement

In this example below you will see how to do a Transparent Overlay Experiement with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by btflynn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright btflynn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/btflynn/transparent-overlay-experiement-AaHuI */
.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/btflynn/transparent-overlay-experiement-AaHuI */
var thumb = $('.thumb');

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

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

Comments