Folding Image And Reveal

Watch Here

Hover Over The Folding Image And Reveal The Button

Copy This Part Of The Code In To HTML Box: Folding Image And Reveal

				
					<div class="view">
    
    
    <div class="background">
</div>
    
    
    <div class="view-back">
			<span data-icon="">Watch</span>
			<span data-icon="">Here</span>
			<a href="https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg">&darr;</a>
		</div>
	
	<div class="slice s1" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
		<span class="overlay"></span>
		
		<div class="slice s2" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
			<span class="overlay"></span>
			
			<div class="slice s3" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
				<span class="overlay"></span>
				
				<div class="slice s4" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
					<span class="overlay"></span>
					
					<div class="slice s5" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
						<span class="overlay"></span>
						
				<div class="slice s6" style="background-image: url(https://diywebsitespro.com/wp-content/uploads/2022/08/Custom-scrollbar-for-wordpress-and-elementor.jpg); ">
						<span class="overlay"></span>		
				</div><!-- /s6 -->
				</div><!-- /s5 -->
				
				</div><!-- /s4 -->
					
			</div><!-- /s3 -->
				
		</div><!-- /s2 -->
			
	</div><!-- /s1 -->
	
</div><!-- /view -->

<script>
    $.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 class="slice s6">';	
								struct	+='</div>';
							struct	+='</div>';
						struct	+='</div>';
					struct	+='</div>';
				struct	+='</div>';
				
			var $struct = $( struct );
			
			$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
			
		} );
		
	});

};
    
</script>
				
			

Copy This Part Of The Code In To Custom CSS Box: Folding Image And Reveal

				
					.view {
	width: 370px;
	height: 216px;
	margin: 10px;
	float: center;
	position: relative;
	border: 8px solid #fff;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
	background: #333;
	perspective: 500px;
}

.view .slice{
	width: 60px;
	height: 100%;
	z-index: 100;
	transform-style: preserve-3d;
	transform-origin: left center;
	transition: transform 150ms ease-in-out;
	
}

.view div.view-back{
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	background: #666;
	z-index: 0;
}

.view-back span {
	display: block;
	float: right;
	padding: 5px 20px 5px;
	width: 100%;
	text-align: right;
	font-size: 16px;
	color: rgba(255,255,255,0.6);
}

.view-back span:first-child {
	padding-top: 20px;
}

.view-back a {
	display: bock;
	font-size: 18px;
	color: rgba(255,255,255,0.4);
	position: absolute;
	right: 15px;
	bottom: 15px;
	border: 2px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	line-height: 22px;
	text-align: center;
	font-weight: 700;
}

.view-back a:hover {
	color: #fff;
	border-color: #fff;
}

.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
	color: rgba(255,255,255,0.2);
	text-shadow: 0 0 1px rgba(255,255,255,0.2);
	padding-right: 5px;
}

.view .s2, 
.view .s3, 
.view .s4, 
.view .s5, 
.view .s6
{
	transform: translateX(60px);
}

.view .s1 {
	background-position: 0px 0px;
	background-size: cover;
}
.view .s2 {
	background-position: -60px 0px;
	background-size: cover;
}
.view .s3 {
	background-position: -120px 0px;
	background-size: cover;
}
.view .s4 {
	background-position: -180px 0px;
	background-size: cover;
}
.view .s5 {
	background-position: -240px 0px;
	background-size: cover;
}
	.view .s6 {
	background-position: -300px 0px;
	background-size: cover;
	background-repeat: no-repeat
	
}


.view .overlay {
	width: 60px;
	height: 100%;
	opacity: 0;
	position: absolute;
	transition: opacity 150ms ease-in-out;
}

.view:hover .overlay {
	opacity: 1;
}

.view img {
	position: absolute;
	z-index: 0;
	transition: left 0.3s ease-in-out;
}

.view {
	overflow: ;
}

.view:hover img {
	left: -85px;
}

.view div.view-back {
	background: #666;
}

.view {
	perspective: 350px;
}

.view div {
	transition: all 0.3s ease-in-out;
}

.view:hover .s2{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);

}
.view:hover .s4{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,45deg);
}

.view:hover .s5{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}

.view:hover .s6{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

.view:hover .s5{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

.view .s2 > .overlay {
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s3 > .overlay {
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s4 > .overlay {
	background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s5 > .overlay {
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view .s6 > .overlay {
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view div.view-back{
	background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

.shadow {
   position: absolute;
   top: 5px;
   left: 0;
   width: 100%;
   height: 300px;
   background: black;
   border-radius: 30px;
   opacity: .5;
   filter: blur(5px);
}

.view:hover .shadow {
   left: -3px;
   width: 462px;
   height: 150px;
   filter: blur(7px);
   opacity: 1;
}
				
			
alt="tutorials" alt="Hexagon Portfolio Code" alt="GLOWING NEON TEXT" alt="Water Ripple Effect " alt="Water Ripple Effect code" alt="Rotate And Z-Index" alt="Not Linktree" alt="User IP and Location" alt="auto play video" alt="Click Button to Change Image And Text Using Elementor" alt="7 Day Repeat Countdown Timer" alt="Blog Posts Only" alt="Change Background And Text Colour On Scroll Code"
Folding Image And Reveal Tutorial

Folding Image And Reveal Code

Folding Image And Reveal Code

Folding Image And Reveal Code