3d Books With Image Hover Effect CSS
3d Books With Image Hover Effect CSS

Today we are going to build 3D Books with image hover effect using CSS.

Basically I created this because I was thinking about creating a blogger templates and I decided to make a blogger template for PDF sharing web blog and I decided to import this style in that template.

What's happening developers today we are going to make 3d Books With Image Hover Effect

Here i have snapped a preview of this for you.
Normal Preview:
3d Books With Image Hover Effect CSS

Mouseover Preview:
3d Books With Image Hover Effect CSS

As you know the HTML markup is needed for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As 3d Books With Image Hover Effect/index.html :


<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <ul class="align"> <li> <figure class="book"> <ul class="hardcover_front"> <li> <div class="coverDesign yellow"> <span class="ribbon">v 1.2</span> <h1>Big Bang</h1> <p>Creation of universe</p> </div> </li> <li></li> </ul>  <!-- Pages -->  <ul class="page"> <li></li> <li> <a class="btn" href="https://www.softwebtuts.com">Download</a> </li> <li></li> <li></li> <li></li> </ul>  <!-- Back -->  <ul class="hardcover_back"> <li></li> <li></li> </ul> <ul class="book_spine"> <li></li> <li></li> </ul> <figcaption> <h1>Big Bang</h1> <span>By Stephen Hawking</span> <p>This book describes the creation of this universe. This book woos written by stephen hawking, man behind big bang. <br/>Read More...</p> </figcaption> </figure> </li> <li><figure class="book">  <!-- Front -->  <ul class="hardcover_front"> <li> <img src="https://lh3.googleusercontent.com/--XcqshMbQMs/XIFEcnO5UwI/AAAAAAAAA4g/gaJXjmZN-00KedocwtNfKvBLKCoZK30vQCLcBGAs/download.jpg" alt="Softweb Tuts" width="100%" height="100%"> </li> <li></li> </ul>  <!-- Pages -->  <ul class="page"> <li></li> <li> <a class="btn" href="https://www.softwebtuts.com">Download</a> </li> <li></li> <li></li> <li></li> </ul>  <!-- Back -->  <ul class="hardcover_back"> <li></li> <li></li> </ul> <ul class="book_spine"> <li></li> <li></li> </ul> <figcaption> <h1>A B C Rhymes</h1> <span>By Muhmmad Muzammil</span> <p>This is a simple rhymes book written by the author. In this book you will find poems for little childrens.<br/>Read More...</p> </figcaption> </figure> </li> </ul> </body> </html>

Above HTML code is in compressed form you don't have to compress it anymore and it is not so much lengthy if you want to learn anything from the above code then you can beautify it.
Without CSS our this script (3d Books With Image Hover Effect) will never look dazzling. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As 3d Books With Image Hover Effect/css/style.css :

*,ul{margin:0;padding:0}.align>li,.btn{display:inline-block}.coverDesign h1,.coverDesign p{text-shadow:-1px -1px 0 rgba(0,0,0,.1);text-align:center}.align,.btn,.coverDesign h1,.coverDesign p,.ribbon{text-align:center}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}::after,::before{content:""}body,html{height:100%;-webkit-font-smoothing:subpixel-antialiased}html{font-size:100%}body{background:#ecf0f1;color:#34495e;font-family:Lato,Arial,sans-serif;font-weight:400;line-height:1.2}ul{list-style:none}a{color:#2c3e50;text-decoration:none}.btn{text-transform:uppercase;border:2px solid #2c3e50;margin-top:100px;font-size:.9em;font-weight:700;padding:.1em .4em;-webkit-transition:color .3s,border-color .3s;-moz-transition:color .3s,border-color .3s;transition:color .3s,border-color .3s}.btn:hover{border-color:#16a085;color:#16a085}.align{clear:both;margin:90px auto 20px;width:100%;max-width:1170px}.align>li{width:500px;min-height:300px;margin:30px 20px 30px 30px;padding:0 0 0 60px;vertical-align:top}.book{position:relative;width:160px;height:220px;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hardcover_front li:first-child{background-color:#eee;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.coverDesign,.ribbon{-webkit-backface-visibility:hidden}.hardcover_back li:first-child,.hardcover_back li:last-child,.hardcover_front li:last-child{background:#fffbec}.book_spine li:first-child{background:#eee}.book_spine li:last-child{background:#333}.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back li:first-child:before,.hardcover_back li:last-child:after,.hardcover_back li:last-child:before,.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{background:#999;position:absolute;top:0;left:0}.page>li{background:-webkit-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:-moz-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:-ms-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:linear-gradient(left,#e1ddd8 0,#fffbf6 100%);box-shadow:inset 0 -1px 2px rgba(50,50,50,.1),inset -1px 0 1px rgba(150,150,150,.2);border-radius:0 5px 5px 0}.hardcover_front{-webkit-transform:rotateY(-34deg) translateZ(8px);-moz-transform:rotateY(-34deg) translateZ(8px);transform:rotateY(-34deg) translateZ(8px);z-index:100;-webkit-transition:all .8s ease,z-index .6s;-moz-transition:all .8s ease,z-index .6s;transition:all .8s ease,z-index .6s}.hardcover_back{-webkit-transform:rotateY(-15deg) translateZ(-8px);-moz-transform:rotateY(-15deg) translateZ(-8px);transform:rotateY(-15deg) translateZ(-8px)}.page li:nth-child(1){-webkit-transform:rotateY(-28deg);-moz-transform:rotateY(-28deg);transform:rotateY(-28deg)}.page li:nth-child(2){-webkit-transform:rotateY(-30deg);-moz-transform:rotateY(-30deg);transform:rotateY(-30deg)}.page li:nth-child(3){-webkit-transform:rotateY(-32deg);-moz-transform:rotateY(-32deg);transform:rotateY(-32deg)}.page li:nth-child(4){-webkit-transform:rotateY(-34deg);-moz-transform:rotateY(-34deg);transform:rotateY(-34deg)}.page li:nth-child(5){-webkit-transform:rotateY(-36deg);-moz-transform:rotateY(-36deg);transform:rotateY(-36deg)}.book_spine,.book_spine li,.hardcover_back,.hardcover_back li,.hardcover_front,.hardcover_front li{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hardcover_back,.hardcover_front{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%}.hardcover_front li:first-child{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hardcover_front li:last-child{-webkit-transform:rotateY(180deg) translateZ(2px);-moz-transform:rotateY(180deg) translateZ(2px);transform:rotateY(180deg) translateZ(2px)}.hardcover_back li:first-child{-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hardcover_back li:last-child{-webkit-transform:translateZ(-2px);-moz-transform:translateZ(-2px);transform:translateZ(-2px)}.hardcover_front li:first-child:after,.hardcover_front li:first-child:before{width:4px;height:100%}.hardcover_front li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_front li:first-child:before{-webkit-transform:rotateY(90deg) translateZ(158px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(158px) translateX(2px);transform:rotateY(90deg) translateZ(158px) translateX(2px)}.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{width:4px;height:160px}.hardcover_front li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px)}.hardcover_front li:last-child:before{box-shadow:0 0 30px 5px #333;-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px)}.hardcover_back li:first-child:after,.hardcover_back li:first-child:before{width:4px;height:100%}.hardcover_back li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_back li:first-child:before{-webkit-transform:rotateY(90deg) translateZ(158px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(158px) translateX(2px);transform:rotateY(90deg) translateZ(158px) translateX(2px)}.hardcover_back li:last-child:after,.hardcover_back li:last-child:before{width:4px;height:160px}.hardcover_back li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px)}.hardcover_back li:last-child:before{box-shadow:10px -1px 80px 20px #666;-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px)}.book_spine{-webkit-transform:rotateY(60deg) translateX(-5px) translateZ(-12px);-moz-transform:rotateY(60deg) translateX(-5px) translateZ(-12px);transform:rotateY(60deg) translateX(-5px) translateZ(-12px);width:16px;z-index:0}.book_spine li:first-child{-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.book_spine li:last-child{-webkit-transform:translateZ(-2px);-moz-transform:translateZ(-2px);transform:translateZ(-2px)}.book_spine li:first-child:after,.book_spine li:first-child:before{width:4px;height:100%}.book_spine li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.book_spine li:first-child:before{-webkit-transform:rotateY(-90deg) translateZ(-12px);-moz-transform:rotateY(-90deg) translateZ(-12px);transform:rotateY(-90deg) translateZ(-12px)}.book_spine li:last-child:after,.book_spine li:last-child:before{width:4px;height:16px}.book_spine li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px)}.book_spine li:last-child:before{box-shadow:5px -1px 100px 40px rgba(0,0,0,.2);-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px)}.page,.page>li{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.page{width:100%;height:98%;top:1%;left:3%;z-index:10}.coverDesign,.coverDesign::after{top:0;left:0;bottom:0;right:0;position:absolute}.page>li{width:100%;height:100%;-webkit-transform-origin:left center;-moz-transform-origin:left center;transform-origin:left center;-webkit-transition-property:transform;-moz-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}.page>li:nth-child(1),.page>li:nth-child(2){-webkit-transition-duration:.6s;-moz-transition-duration:.6s;transition-duration:.6s}.page>li:nth-child(3){-webkit-transition-duration:.4s;-moz-transition-duration:.4s;transition-duration:.4s}.page>li:nth-child(4){-webkit-transition-duration:.5s;-moz-transition-duration:.5s;transition-duration:.5s}.page>li:nth-child(5){-webkit-transition-duration:.6s;-moz-transition-duration:.6s;transition-duration:.6s}.book:hover>.hardcover_front{-webkit-transform:rotateY(-145deg) translateZ(0);-moz-transform:rotateY(-145deg) translateZ(0);transform:rotateY(-145deg) translateZ(0);z-index:0}.book:hover>.page li:nth-child(1){-webkit-transform:rotateY(-30deg);-moz-transform:rotateY(-30deg);transform:rotateY(-30deg);-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;transition-duration:1.5s}.book:hover>.page li:nth-child(2){-webkit-transform:rotateY(-35deg);-moz-transform:rotateY(-35deg);transform:rotateY(-35deg);-webkit-transition-duration:1.8s;-moz-transition-duration:1.8s;transition-duration:1.8s}.book:hover>.page li:nth-child(3){-webkit-transform:rotateY(-118deg);-moz-transform:rotateY(-118deg);transform:rotateY(-118deg);-webkit-transition-duration:1.6s;-moz-transition-duration:1.6s;transition-duration:1.6s}.book:hover>.page li:nth-child(4){-webkit-transform:rotateY(-130deg);-moz-transform:rotateY(-130deg);transform:rotateY(-130deg);-webkit-transition-duration:1.4s;-moz-transition-duration:1.4s;transition-duration:1.4s}.book:hover>.page li:nth-child(5){-webkit-transform:rotateY(-140deg);-moz-transform:rotateY(-140deg);transform:rotateY(-140deg);-webkit-transition-duration:1.2s;-moz-transition-duration:1.2s;transition-duration:1.2s}.coverDesign{overflow:hidden;z-index:1;-moz-backface-visibility:hidden;backface-visibility:hidden}.coverDesign::after{background-image:-webkit-linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%);background-image:-moz-linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%);background-image:linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%)}.coverDesign h1{color:#fff;font-size:2.2em;letter-spacing:.05em;margin:54% 0 0}.coverDesign p{color:#f8f8f8;font-size:1em}.yellow{background-color:#f1c40f;background-image:-webkit-linear-gradient(top,#f1c40f 58%,#e7ba07 0);background-image:-moz-linear-gradient(top,#f1c40f 58%,#e7ba07 0);background-image:linear-gradient(top,#f1c40f 58%,#e7ba07 0)}.blue{background-color:#3498db;background-image:-webkit-linear-gradient(top,#3498db 58%,#2a90d4 0);background-image:-moz-linear-gradient(top,#3498db 58%,#2a90d4 0);background-image:linear-gradient(top,#3498db 58%,#2a90d4 0)}.grey{background-color:#f8e9d1;background-image:-webkit-linear-gradient(top,#f8e9d1 58%,#e7d5b7 0);background-image:-moz-linear-gradient(top,#f8e9d1 58%,#e7d5b7 0);background-image:linear-gradient(top,#f8e9d1 58%,#e7d5b7 0)}.ribbon{background:#c0392b;color:#fff;display:block;font-size:.7em;position:absolute;top:11px;right:1px;width:40px;height:20px;line-height:20px;letter-spacing:.15em;-webkit-transform:rotateZ(45deg) translateZ(1px);-moz-transform:rotateZ(45deg) translateZ(1px);transform:rotateZ(45deg) translateZ(1px);-moz-backface-visibility:hidden;backface-visibility:hidden;z-index:10}.ribbon::after,.ribbon::before{position:absolute;top:-20px;width:0;height:0;border-bottom:20px solid #c0392b;border-top:20px solid transparent}.ribbon::before{left:-20px;border-left:20px solid transparent}.ribbon::after{right:-20px;border-right:20px solid transparent}figcaption{padding-left:40px;text-align:left;position:absolute;top:0;left:160px;width:310px;-webkit-backface-visibility:hidden}figcaption h1{margin:0}figcaption span{color:#16a085;padding:.6em 0 1em;display:block}figcaption p{color:#63707d;line-height:1.3}@media screen and (max-width:37.8125em){.align>li{width:100%;min-height:440px;height:auto;padding:0;margin:0 0 30px}.book{margin:0 auto}figcaption{text-align:center;width:320px;top:250px;padding-left:0;left:-80px;font-size:90%}}
In the above CSS code I have created some animations on hover.

Result :

So here we are, We have done and our project 3d Books With Image Hover Effect is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • 3d Books With Image Hover Effect
    • css
      • style.css
    • index.html

Download Project (3d Books With Image Hover Effect) File :

3d Books With Image Hover Effect.zip
File Size 3.75 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

That's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.
Thank you !
3d Books With Image Hover Effect CSS

3d Books With Image Hover Effect CSS

3d Books With Image Hover Effect CSS

Today we are going to build 3D Books with image hover effect using CSS.

Basically I created this because I was thinking about creating a blogger templates and I decided to make a blogger template for PDF sharing web blog and I decided to import this style in that template.

What's happening developers today we are going to make 3d Books With Image Hover Effect

Here i have snapped a preview of this for you.
Normal Preview:
3d Books With Image Hover Effect CSS

Mouseover Preview:
3d Books With Image Hover Effect CSS

As you know the HTML markup is needed for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As 3d Books With Image Hover Effect/index.html :


<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <ul class="align"> <li> <figure class="book"> <ul class="hardcover_front"> <li> <div class="coverDesign yellow"> <span class="ribbon">v 1.2</span> <h1>Big Bang</h1> <p>Creation of universe</p> </div> </li> <li></li> </ul>  <!-- Pages -->  <ul class="page"> <li></li> <li> <a class="btn" href="https://www.softwebtuts.com">Download</a> </li> <li></li> <li></li> <li></li> </ul>  <!-- Back -->  <ul class="hardcover_back"> <li></li> <li></li> </ul> <ul class="book_spine"> <li></li> <li></li> </ul> <figcaption> <h1>Big Bang</h1> <span>By Stephen Hawking</span> <p>This book describes the creation of this universe. This book woos written by stephen hawking, man behind big bang. <br/>Read More...</p> </figcaption> </figure> </li> <li><figure class="book">  <!-- Front -->  <ul class="hardcover_front"> <li> <img src="https://lh3.googleusercontent.com/--XcqshMbQMs/XIFEcnO5UwI/AAAAAAAAA4g/gaJXjmZN-00KedocwtNfKvBLKCoZK30vQCLcBGAs/download.jpg" alt="Softweb Tuts" width="100%" height="100%"> </li> <li></li> </ul>  <!-- Pages -->  <ul class="page"> <li></li> <li> <a class="btn" href="https://www.softwebtuts.com">Download</a> </li> <li></li> <li></li> <li></li> </ul>  <!-- Back -->  <ul class="hardcover_back"> <li></li> <li></li> </ul> <ul class="book_spine"> <li></li> <li></li> </ul> <figcaption> <h1>A B C Rhymes</h1> <span>By Muhmmad Muzammil</span> <p>This is a simple rhymes book written by the author. In this book you will find poems for little childrens.<br/>Read More...</p> </figcaption> </figure> </li> </ul> </body> </html>

Above HTML code is in compressed form you don't have to compress it anymore and it is not so much lengthy if you want to learn anything from the above code then you can beautify it.
Without CSS our this script (3d Books With Image Hover Effect) will never look dazzling. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As 3d Books With Image Hover Effect/css/style.css :

*,ul{margin:0;padding:0}.align>li,.btn{display:inline-block}.coverDesign h1,.coverDesign p{text-shadow:-1px -1px 0 rgba(0,0,0,.1);text-align:center}.align,.btn,.coverDesign h1,.coverDesign p,.ribbon{text-align:center}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}::after,::before{content:""}body,html{height:100%;-webkit-font-smoothing:subpixel-antialiased}html{font-size:100%}body{background:#ecf0f1;color:#34495e;font-family:Lato,Arial,sans-serif;font-weight:400;line-height:1.2}ul{list-style:none}a{color:#2c3e50;text-decoration:none}.btn{text-transform:uppercase;border:2px solid #2c3e50;margin-top:100px;font-size:.9em;font-weight:700;padding:.1em .4em;-webkit-transition:color .3s,border-color .3s;-moz-transition:color .3s,border-color .3s;transition:color .3s,border-color .3s}.btn:hover{border-color:#16a085;color:#16a085}.align{clear:both;margin:90px auto 20px;width:100%;max-width:1170px}.align>li{width:500px;min-height:300px;margin:30px 20px 30px 30px;padding:0 0 0 60px;vertical-align:top}.book{position:relative;width:160px;height:220px;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hardcover_front li:first-child{background-color:#eee;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.coverDesign,.ribbon{-webkit-backface-visibility:hidden}.hardcover_back li:first-child,.hardcover_back li:last-child,.hardcover_front li:last-child{background:#fffbec}.book_spine li:first-child{background:#eee}.book_spine li:last-child{background:#333}.book_spine li:first-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back li:first-child:before,.hardcover_back li:last-child:after,.hardcover_back li:last-child:before,.hardcover_front li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{background:#999;position:absolute;top:0;left:0}.page>li{background:-webkit-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:-moz-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:-ms-linear-gradient(left,#e1ddd8 0,#fffbf6 100%);background:linear-gradient(left,#e1ddd8 0,#fffbf6 100%);box-shadow:inset 0 -1px 2px rgba(50,50,50,.1),inset -1px 0 1px rgba(150,150,150,.2);border-radius:0 5px 5px 0}.hardcover_front{-webkit-transform:rotateY(-34deg) translateZ(8px);-moz-transform:rotateY(-34deg) translateZ(8px);transform:rotateY(-34deg) translateZ(8px);z-index:100;-webkit-transition:all .8s ease,z-index .6s;-moz-transition:all .8s ease,z-index .6s;transition:all .8s ease,z-index .6s}.hardcover_back{-webkit-transform:rotateY(-15deg) translateZ(-8px);-moz-transform:rotateY(-15deg) translateZ(-8px);transform:rotateY(-15deg) translateZ(-8px)}.page li:nth-child(1){-webkit-transform:rotateY(-28deg);-moz-transform:rotateY(-28deg);transform:rotateY(-28deg)}.page li:nth-child(2){-webkit-transform:rotateY(-30deg);-moz-transform:rotateY(-30deg);transform:rotateY(-30deg)}.page li:nth-child(3){-webkit-transform:rotateY(-32deg);-moz-transform:rotateY(-32deg);transform:rotateY(-32deg)}.page li:nth-child(4){-webkit-transform:rotateY(-34deg);-moz-transform:rotateY(-34deg);transform:rotateY(-34deg)}.page li:nth-child(5){-webkit-transform:rotateY(-36deg);-moz-transform:rotateY(-36deg);transform:rotateY(-36deg)}.book_spine,.book_spine li,.hardcover_back,.hardcover_back li,.hardcover_front,.hardcover_front li{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hardcover_back,.hardcover_front{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;transform-origin:0 100%}.hardcover_front li:first-child{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hardcover_front li:last-child{-webkit-transform:rotateY(180deg) translateZ(2px);-moz-transform:rotateY(180deg) translateZ(2px);transform:rotateY(180deg) translateZ(2px)}.hardcover_back li:first-child{-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hardcover_back li:last-child{-webkit-transform:translateZ(-2px);-moz-transform:translateZ(-2px);transform:translateZ(-2px)}.hardcover_front li:first-child:after,.hardcover_front li:first-child:before{width:4px;height:100%}.hardcover_front li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_front li:first-child:before{-webkit-transform:rotateY(90deg) translateZ(158px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(158px) translateX(2px);transform:rotateY(90deg) translateZ(158px) translateX(2px)}.hardcover_front li:last-child:after,.hardcover_front li:last-child:before{width:4px;height:160px}.hardcover_front li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px)}.hardcover_front li:last-child:before{box-shadow:0 0 30px 5px #333;-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px)}.hardcover_back li:first-child:after,.hardcover_back li:first-child:before{width:4px;height:100%}.hardcover_back li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.hardcover_back li:first-child:before{-webkit-transform:rotateY(90deg) translateZ(158px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(158px) translateX(2px);transform:rotateY(90deg) translateZ(158px) translateX(2px)}.hardcover_back li:last-child:after,.hardcover_back li:last-child:before{width:4px;height:160px}.hardcover_back li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px)}.hardcover_back li:last-child:before{box-shadow:10px -1px 80px 20px #666;-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px)}.book_spine{-webkit-transform:rotateY(60deg) translateX(-5px) translateZ(-12px);-moz-transform:rotateY(60deg) translateX(-5px) translateZ(-12px);transform:rotateY(60deg) translateX(-5px) translateZ(-12px);width:16px;z-index:0}.book_spine li:first-child{-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.book_spine li:last-child{-webkit-transform:translateZ(-2px);-moz-transform:translateZ(-2px);transform:translateZ(-2px)}.book_spine li:first-child:after,.book_spine li:first-child:before{width:4px;height:100%}.book_spine li:first-child:after{-webkit-transform:rotateY(90deg) translateZ(-2px) translateX(2px);-moz-transform:rotateY(90deg) translateZ(-2px) translateX(2px);transform:rotateY(90deg) translateZ(-2px) translateX(2px)}.book_spine li:first-child:before{-webkit-transform:rotateY(-90deg) translateZ(-12px);-moz-transform:rotateY(-90deg) translateZ(-12px);transform:rotateY(-90deg) translateZ(-12px)}.book_spine li:last-child:after,.book_spine li:last-child:before{width:4px;height:16px}.book_spine li:last-child:after{-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);transform:rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px)}.book_spine li:last-child:before{box-shadow:5px -1px 100px 40px rgba(0,0,0,.2);-webkit-transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);-moz-transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);transform:rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px)}.page,.page>li{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.page{width:100%;height:98%;top:1%;left:3%;z-index:10}.coverDesign,.coverDesign::after{top:0;left:0;bottom:0;right:0;position:absolute}.page>li{width:100%;height:100%;-webkit-transform-origin:left center;-moz-transform-origin:left center;transform-origin:left center;-webkit-transition-property:transform;-moz-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}.page>li:nth-child(1),.page>li:nth-child(2){-webkit-transition-duration:.6s;-moz-transition-duration:.6s;transition-duration:.6s}.page>li:nth-child(3){-webkit-transition-duration:.4s;-moz-transition-duration:.4s;transition-duration:.4s}.page>li:nth-child(4){-webkit-transition-duration:.5s;-moz-transition-duration:.5s;transition-duration:.5s}.page>li:nth-child(5){-webkit-transition-duration:.6s;-moz-transition-duration:.6s;transition-duration:.6s}.book:hover>.hardcover_front{-webkit-transform:rotateY(-145deg) translateZ(0);-moz-transform:rotateY(-145deg) translateZ(0);transform:rotateY(-145deg) translateZ(0);z-index:0}.book:hover>.page li:nth-child(1){-webkit-transform:rotateY(-30deg);-moz-transform:rotateY(-30deg);transform:rotateY(-30deg);-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;transition-duration:1.5s}.book:hover>.page li:nth-child(2){-webkit-transform:rotateY(-35deg);-moz-transform:rotateY(-35deg);transform:rotateY(-35deg);-webkit-transition-duration:1.8s;-moz-transition-duration:1.8s;transition-duration:1.8s}.book:hover>.page li:nth-child(3){-webkit-transform:rotateY(-118deg);-moz-transform:rotateY(-118deg);transform:rotateY(-118deg);-webkit-transition-duration:1.6s;-moz-transition-duration:1.6s;transition-duration:1.6s}.book:hover>.page li:nth-child(4){-webkit-transform:rotateY(-130deg);-moz-transform:rotateY(-130deg);transform:rotateY(-130deg);-webkit-transition-duration:1.4s;-moz-transition-duration:1.4s;transition-duration:1.4s}.book:hover>.page li:nth-child(5){-webkit-transform:rotateY(-140deg);-moz-transform:rotateY(-140deg);transform:rotateY(-140deg);-webkit-transition-duration:1.2s;-moz-transition-duration:1.2s;transition-duration:1.2s}.coverDesign{overflow:hidden;z-index:1;-moz-backface-visibility:hidden;backface-visibility:hidden}.coverDesign::after{background-image:-webkit-linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%);background-image:-moz-linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%);background-image:linear-gradient(-135deg,rgba(255,255,255,.45) 0,transparent 100%)}.coverDesign h1{color:#fff;font-size:2.2em;letter-spacing:.05em;margin:54% 0 0}.coverDesign p{color:#f8f8f8;font-size:1em}.yellow{background-color:#f1c40f;background-image:-webkit-linear-gradient(top,#f1c40f 58%,#e7ba07 0);background-image:-moz-linear-gradient(top,#f1c40f 58%,#e7ba07 0);background-image:linear-gradient(top,#f1c40f 58%,#e7ba07 0)}.blue{background-color:#3498db;background-image:-webkit-linear-gradient(top,#3498db 58%,#2a90d4 0);background-image:-moz-linear-gradient(top,#3498db 58%,#2a90d4 0);background-image:linear-gradient(top,#3498db 58%,#2a90d4 0)}.grey{background-color:#f8e9d1;background-image:-webkit-linear-gradient(top,#f8e9d1 58%,#e7d5b7 0);background-image:-moz-linear-gradient(top,#f8e9d1 58%,#e7d5b7 0);background-image:linear-gradient(top,#f8e9d1 58%,#e7d5b7 0)}.ribbon{background:#c0392b;color:#fff;display:block;font-size:.7em;position:absolute;top:11px;right:1px;width:40px;height:20px;line-height:20px;letter-spacing:.15em;-webkit-transform:rotateZ(45deg) translateZ(1px);-moz-transform:rotateZ(45deg) translateZ(1px);transform:rotateZ(45deg) translateZ(1px);-moz-backface-visibility:hidden;backface-visibility:hidden;z-index:10}.ribbon::after,.ribbon::before{position:absolute;top:-20px;width:0;height:0;border-bottom:20px solid #c0392b;border-top:20px solid transparent}.ribbon::before{left:-20px;border-left:20px solid transparent}.ribbon::after{right:-20px;border-right:20px solid transparent}figcaption{padding-left:40px;text-align:left;position:absolute;top:0;left:160px;width:310px;-webkit-backface-visibility:hidden}figcaption h1{margin:0}figcaption span{color:#16a085;padding:.6em 0 1em;display:block}figcaption p{color:#63707d;line-height:1.3}@media screen and (max-width:37.8125em){.align>li{width:100%;min-height:440px;height:auto;padding:0;margin:0 0 30px}.book{margin:0 auto}figcaption{text-align:center;width:320px;top:250px;padding-left:0;left:-80px;font-size:90%}}
In the above CSS code I have created some animations on hover.

Result :

So here we are, We have done and our project 3d Books With Image Hover Effect is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • 3d Books With Image Hover Effect
    • css
      • style.css
    • index.html

Download Project (3d Books With Image Hover Effect) File :

3d Books With Image Hover Effect.zip
File Size 3.75 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

That's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.
Thank you !

Related Posts

Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo