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 ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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>
|