Demo

HTML

<a class="sublime zoomable" href="#video1" data-settings="overlay-opacity:0.9">
  <img src="http://media.sublimevideo.net/vpa/ms_800.jpg" width="320" height="180" />
  <span class="zoom_icon"></span>
</a>

<video id="video1" data-settings="uid:demo-lightbox-custom-overlay-opacity; autoresize:fit;" title="Demo: Lightbox, Custom overlay opacity" poster="http://media.sublimevideo.net/vpa/ms_800.jpg" width="640" height="360" preload="none" style="display:none">
  <source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" />
  <source src="http://media.sublimevideo.net/vpa/ms_360p.webm" />
</video>

CSS

a {
  color:#1185ff;
}

/* Specific CSS code for the magnifying glass icon */
a.zoomable {
  display:block;
  /* Adjust the width and height properties
  according to your “zoomable thumbnail”’s dimensions;*/
  width:320px;
  height:180px;
  background:#000;
  position:relative;
  -webkit-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  -moz-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
}

a.zoomable span.zoom_icon {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  /*
  Important:
  Upload the icon below to your server and update the path accordingly.
  Please do not hotlink it!
  */
  background:url("http://f.cl.ly/items/3C1V2w2r36360V3c1b3x/sv_zoom_icon.png") no-repeat bottom right;
  opacity:0.3;
  -o-transition:opacity 0.25s;
  -moz-transition:opacity 0.25s;
  -webkit-transition:opacity 0.25s;
  transition:opacity 0.25s;
}

a.zoomable:hover span.zoom_icon {opacity:1}