JSFiddle - React, Tailwind, and code Playground

by CroaToa

HTML

<article class="portfolio-item">
					<h2>Lorem Ipsum</h2>
						<div class="portfolio-item-view cf">
							<div class="view">
								<div class="view-back">
									<a href="#" class="to-site tooltip">&rarr;</a>
									<a href="img/furnito-big.jpg" title="<a href=img/furnito-big.jpg target=_blank>view full size</a>" class="zoom tooltip single_image" rel="lightbox"></a>
									<ul>
										<li>
											<span class="info-container">
												<a href="" class="info">i </a>
											</span>
											<div class="work-info">
												<ul>
													<li> 1</li>
													<li> 2</li>
													<li>3</li>
													<li> 4</li>
													<li> 5</li>
													<li> 6</li>
													<li> 7</li>
													<li> 8</li>
													<li> 9</li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
								<img src="http://placehold.it/370x280" alt="">
							</div>
						</div><!-- portfolio-item-view -->

CSS

.view img{display: none}
@media screen and (max-width:980px){
    .view .slice{display: none}
    .view img{display: block}
}

JavaScript

( function( $ ) {
	
	$.fn.hoverfold = function( args ) {

		this.each( function() {
		
			$( this ).children( '.view' ).each( function() {
			
				var $item 	= $( this ),
					img		= $item.children( 'img' ).attr( 'src' ),
					struct	= '<div class="slice s1">';
						struct	+='<div class="slice s2">';
							struct	+='<div class="slice s3">';
								struct	+='<div class="slice s4">';
									struct	+='<div class="slice s5">';
									struct	+='</div>';
								struct	+='</div>';
							struct	+='</div>';
						struct	+='</div>';
					struct	+='</div>';
					
				var $struct = $( struct );
				
				$item.append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
				
			} );
			
		});

	};

} )

( jQuery );







$( '.portfolio-item-view' ).hoverfold();