Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> 3d Image Slide


Code Snippet </> Info


Snippet Name: 3d Image Slide

Description: Add a cool image effect to your web page using the 3d Image Slide code snippet.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Swap image path with your image URL path.

Author: Phe0nix

Last Modified: 2015-08-26 22:37:17

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <head> <title>3d Image Slide</title> <style> /* Begin 3d Image Slide */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Phe0nix : https://developer.mozilla.org/en-US/profiles/Phe0nix : Creative Commons License == */ /*custom font - Montserrat*/ @import url(http://fonts.googleapis.com/css?family=Montserrat); /* basic reset */ * {margin:0; padding:0;} /* forcing the body to take 100% height */ html, body {min-height:100%;} /* a nice BG */ body { background:#544; /* fallback color */ background:linear-gradient(#544, #565); } /* Thumbnail Background */ .thumb { width:400px; height:300px; margin:70px auto; perspective:1000px; } .thumb a { display:block; width:100%; height:100%; /* double layered BG for lighting effect */ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/image/i1.png"); /* disabling the translucent black bg on the main image */ background-size:0, cover; /* 3d space for children */ transform-style:preserve-3d; transition:all 0.5s; } .thumb:hover a {transform:rotateX(80deg); transform-origin:bottom;} /* bottom surface */ .thumb a:after { /* 36px high element positioned at the bottom of the image */ content:''; position:absolute; left:0; bottom:0; width:100%; height:36px; /* inherit the main BG */ background:inherit; background-size:cover, cover; /* draw the BG bottom up */ background-position:bottom; /* rotate the surface 90deg on the bottom axis */ transform:rotateX(90deg); transform-origin:bottom; } /* label style */ .thumb a span { color:white; text-transform:uppercase; position:absolute; top:100%; left:0; width:100%; font:bold 12px/36px Montserrat; text-align:center; /* the rotation is a bit less than the bottom surface to avoid flickering */ transform:rotateX(-89.99deg); transform-origin:top; z-index:1; } / *shadow */ .thumb a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5); transition:all 0.5s; /* by default the shadow will be almost flat, very transparent, scaled down with a large blur */ opacity:0.15; transform:rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin:bottom; } .thumb:hover a:before { opacity:1; /* blurred effect using box shadow as filter:blur is not supported in all browsers */ box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5); /* pushing the shadow down and scaling it down to size */ transform:rotateX(0) translateZ(-60px) scale(0.85); } /* not part of the code below */ .notes{font-family:arial, verdana, tahoma;color:#eee;text-align:center;} </style> </head> <body> <!-- Container --> <div class="thumb"> <!-- Image --><a href="#"> <!-- Label --><span>Three-eyed Robot</span></a> </div> <div class="notes">Roll mouse cursor over the image to preview the effect.</div> <br /><br /> <div class="notes"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_251.html">Begin 3d Image Slide Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library