Len thumbnail

by Osama Qassar

HTML

<section class="pe-container">

<ul id="pe-thumbs" class="pe-thumbs">
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img src="https://via.placeholder.com/150/0000FF/808080?Text=Osama"></a>
  </li>
  <li><a href="#">
    <img...

CSS

.pe-thumbs{
	width: 900px;
	height: 400px;
	margin: 20px auto;
	position: relative;
	background: transparent url(../images/3.jpg) top center;
	border: 5px solid #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  list-style: none;
}

.pe-thumbs:before {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(255,102,0,0.2);
}

.pe-thumbs li{
	float: left;
	position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
	display: block;
	position: relative;
}

.pe-thumbs li a img{
	width: 100px;
	opacity: 0.2;
}

.pe-thumbs li a div.pe-description{
	width: 200px;
	height: 100px;
	background: rgba(0,0,0,0.8);
	position: absolute;
	top: 0px;
	left: -200px;
	color: white;
	display: none;
	z-index: 1001;
	text-align: left;
}

.pe-description h3{
	padding: 10px 10px 0px 10px;
	line-height: 20px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 22px;
	margin: 0px;
}
.pe-description p{
	padding: 10px 0px;
	margin: 10px;
	font-size: 11px;
	font-style: italic;
	border-top: 1px solid rgba(255,255,255,0.3);
}

JavaScript

// list of thumbs
var $list		= $('#pe-thumbs'),
	// list's width and offset left.
	// this will be used to know the position of the description container
	listW		= $list.width(),
	listL		= $list.offset().left,
	// the images
	$elems		= $list.find('img'),
	// the description containers
	$descrp		= $list.find('div.pe-description'),
	// maxScale : maximum scale value the image will have
	// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
	settings	= {
		maxScale	: 1.3,
		maxOpacity	: 0.9,
		minOpacity	: Number( $elems.css('opacity') )
	},
	init		= function() {
		
		// minScale will be set in the CSS
		settings.minScale = _getScaleVal() || 1;
		// preload the images (thumbs)
		_loadImages( function() {
			
			_calcDescrp();
			_initEvents();
		
		});
	
	},
	// Get Value of CSS Scale through JavaScript:
	// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
	_getScaleVal= function() {
	
		var st = window.getComputedStyle($elems.get(0), null),
			tr = st.getPropertyValue("-webkit-transform") ||
				 st.getPropertyValue("-moz-transform") ||
				 st.getPropertyValue("-ms-transform") ||
				 st.getPropertyValue("-o-transform") ||
				 st.getPropertyValue("transform") ||
				 "fail...";

		if( tr !== 'none' ) {	 

			var values = tr.split('(')[1].split(')')[0].split(','),
				a = values[0],
				b = values[1],
				c = values[2],
				d = values[3];

			return Math.sqrt( a * a + b * b );
		
		}
		
	},
	// calculates the style values for the description containers,
	// based on the settings variable
	_calcDescrp	= function() {
		
		$descrp.each( function(i) {
		
			var $el		= $(this),
				$img	= $el.prev(),
				img_w	= $img.width(),
				img_h	= $img.height(),
				img_n_w	= settings.maxScale * img_w,
				img_n_h	= settings.maxScale * img_h,
				space_t = ( img_n_h - img_h ) / 2,
				space_l = ( img_n_w - img_w ) / 2;
			
			$el.data( 'space_l', space_l ).css({
				height	: settings.maxScale *...