Folding Effect on Hover

Developer
Marius Balaj
Size
3,317 Kb
Views
54,648
  1. Folding Effect on Hover Previews
  2. Folding Effect on Hover HTML Codes
  3. Folding Effect on Hover CSS Codes
  4. Folding Effect on Hover JS Codes

How do I make an folding effect on hover?

What is a folding effect on hover? How do you make a folding effect on hover? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Folding Effect on Hover Previews
IQ Test

Folding Effect on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folding Effect on Hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Hover the picture</h1>
<article> <div class="entry-thumb"> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> <ul class="share_bar"> <li>Please share:</li> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariucss">Tweet</a> <script> ! function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs'); </script> </li> <li> <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=733382316680164" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe> </li> <li> <!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></li> </ul> </div> <div class="entry-content"> <h2>Gangsta Lorem Ipsum</h2> <p>Lorem ipsum dolizzle sit bling bling, consectetizzle adipiscing ghetto.</p> <p>Mauris pellentesque nibh et turpizzle. Shizznit owned tortor. Pellentesque eleifend rhoncizzle sure.</p> <p>
</article> <script src="js/index.js"></script>
</body>
</html>

Folding Effect on Hover - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans); body { background:#f5f5f5; font-size:13px; color:#9B9B9C; font-family:Open Sans;
}
h1 { margin:80px 0 30px; text-align:center; color:#1E1F22;
}
article { width:540px; background:#fff; margin:0 auto 50px; border-radius:3px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
}
.entry-thumb { background:#1E1F22; border-radius:3px 3px 0 0; height:359px; position:relative;
}
.entry-thumb .part { background:url('http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_5539-1300x866.jpg') no-repeat; background-size:540px auto; width:100%; height:120px; position:relative; transition:.3s all ease-in-out; z-index:100;
}
.entry-thumb .part-2 { background-position:0 -120px;
}
.entry-thumb .part-3 { background-position:0 -180px;
}
.entry-thumb .part-4 { background-position:0 -300px;
}
.entry-thumb .part:nth-child(odd) { -webkit-transform-origin: top; -moz-transform-origin: top; transform-origin: top;
}
.entry-thumb .part:nth-child(even) { -webkit-transform-origin: bottom; -moz-transform-origin: bottom; transform-origin: bottom; height:60px;
}
.entry-thumb .part:nth-child(even)::before { position:absolute; display:block; content:""; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); visibility:hidden; opacity:0; transition:.4s all;
}
.entry-thumb:hover .part:nth-child(odd) { -webkit-transform:perspective(800px) rotateX(25deg); -moz-transform:perspective(800px) rotateX(25deg); transform:perspective(800px) rotateX(25deg);
}
.entry-thumb:hover .part:nth-child(even) { -webkit-transform:perspective(800px) rotateX(-60deg); -moz-transform:perspective(800px) rotateX(-60deg); transform:perspective(800px) rotateX(-60deg); margin-top:-32px;
}
.entry-thumb:hover .part:nth-child(even)::before { opacity:1; visibility:visible;
}
.entry-thumb .share_bar { position:absolute; bottom:17px; padding:0 90px; list-style-type:none; margin:0;
}
.entry-thumb .share_bar li { float:left; margin-right:10px; width:83px; white-space:nowrap;
}
.entry-thumb .share_bar li:nth-child(3) { width:87px;
}
.entry-thumb .share_bar li:last-child { width: 58px; margin-right: 0;
}
.entry-content { padding:20px 90px 40px;
}
.entry-content h2 { color:#1E1F22;
}
.entry-content p { line-height:1.8;
}

Folding Effect on Hover - Script Codes JS Codes

/* The image can be replace on line 27 If you change the size of the article dont forget to change the background-size on line 28
*/
Folding Effect on Hover - Script Codes
Folding Effect on Hover - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4.5
Size 3,317 Kb
Views 54,648
Do you need developer help for Folding Effect on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marius Balaj (mariusbalaj) Script Codes
Name
Angular Particles Explosion
Follow Widget with Folding CSS3 Animation
Codepen CSS Illustration
Pixel art to CSS
One element Vinyl
Optical Illusion
Login with flip 3d animation
JCalculator
Social Buttons Slide
Imperial March
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!