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 >> CSS3 Card Deck Image Gallery With Transition Effect


Code Snippet </> Info


Snippet Name: CSS3 Card Deck Image Gallery With Transition Effect

Description: Add a cool CSS3 card deck image gallery with transition effects that will definitely get your visitors attention.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

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

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> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>HTML5 CSS3 Card Deck Image Gallery Transition Effect</title> <link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css"> <style> /* Begin HTML5 CSS3 Card Deck Image Gallery Transition Effect */ /* == 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 == */ html {margin:0; padding:0;} BODY {font-family:verdana,arial,ms sans serif; font-size:100%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} a {color:#69C;text-decoration:none;} a:hover {color:#F60; text-decoration:underline;} #wrapper {margin:0; padding:15px 15px 15px 15px;} .cards{ position: relative; height: 200px; width: 200px; float: left; margin: 20px; } .cards:hover{ z-index: 1000; } .card{ display: block; position: absolute; top:0px; left: 0px; width: 200px; height: 200px; background: #fff; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; overflow: hidden; padding: 10px; box-shadow:#555 0px 1px 5px; } .card:nth-child(2){ height: 194px; width: 194px; top: 3px; left: 8px; } .card:nth-child(1){ height: 188px; width: 188px; top: 6px; left: 16px; } .cards:hover .card{ width: 200px; height: 200px; } .cards:hover .card:nth-child(1){ left: 60px; transform:rotate(5deg); -ms-transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); } .cards:hover .card:nth-child(2){ } .cards:hover .card:nth-child(3){ left: -60px; transform:rotate(-5deg); -ms-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg); } div #row1 {position:absolute; top:80px; left:30px;} div #row2 {position:absolute; top:320px; left:30px;} div #row3 {position:absolute; top:580px; left:30px;} </style> </head> <body> <div id="wrapper"> <h3>HTML5 CSS3 Card Deck Image Gallery Transition Effect</h3> <div id="row1"> <div class="cards"> <img class="card" alt="" src="images/05.jpg" /> <img class="card" alt="" src="images/03.jpg" /> <img class="card" alt="" src="images/01.jpg" /> </div> <div class="cards"> <img class="card" alt="" src="images/05.jpg" /> <img class="card" alt="" src="images/03.jpg" /> <img class="card" alt="" src="images/04.jpg" /> </div> </div> <div id="row2"> <div class="cards"> <img class="card" alt="" src="images/03.jpg" /> <img class="card" alt="" src="images/04.jpg" /> <img class="card" alt="" src="images/05.jpg" /> </div> <div class="cards"> <img class="card" alt="" src="images/02.jpg" /> <img class="card" alt="" src="images/04.jpg" /> <img class="card" alt="" src="images/04.jpg" /> </div> </div> <div id="row3"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_227.html"> HTML5 CSS3 Card Deck Image Gallery Transition Effect Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library