SublimeVideo lightbox with magnifying glass using the WordPress plugin

magnifying_glass.css

a.zoomable {
  display:block;
  width:180px;
  height:76px;
  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;
  background:url(sv_zoom_icon.png) no-repeat bottom right; /* Set this path 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}

magnifying_glass.html

<!--
 Currently, it's not possible to add classes to the <a></a> before the <video></video>.
 So to add a class for the magnifying glass, we need to use the simple [sublimevideo] shortcode
 and add the thumbnail and link by hand.
 Be sure that there is no space between the <a></a> and the shortcode (that's why I've
 written it on one line)!!
 Also be sure to use the HTML editor.
 And don't forget to add the associated CSS to your CSS file (be sure to change the path to the icon
-->

<a class="sublime zoomable" href="http://yoursite.com/video-mobile.mp4"><img src="http://yoursite.com/thumbnail.jpg" alt="" /><span class="zoom_icon"></span></a>[sublimevideo class="sublime lightbox" style="display:none" poster="http://yoursite.com/poster.jpg" src1="http://yoursite.com/video.mp4" src2="http://yoursite.com/video-mobile.mp4" src3="http://yoursite.com/video.webm" width="584" height="329"]