Because it is a form Porfolio mostly pictures. You should prepare a file with a size of 266x186px. You can change size depending on your requirements.
HTML
<div class="thumb scroll">
<div class="thumb-wrapper">
<img alt="" /> hinh" src="/Duong's Guide
<div class="thumb-detail">
<a href="#" target="_blank">
Content
</ A>
</ Div>
</ Div>
</ Div>
CSS
. Thumb {
display: block;
width: 266px;
height: 186px;
position: relative;
margin-bottom: 20px;
margin-right: 20px;
float: left;}
. Thumb-wrapper {
display: block;
width: 100%;
height: 100%;}
. Thumb img {
width: 100%;
height: 100%;
position: absolute;
display: block;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border-radius: 5px;}
. Thumb. Thumb-detail {
display: block;
width: 100%;
height: 100%;
position: absolute;
background: # 000;
font-family: arial;
font-size: 16px;}
. Thumb. Thumb-detail a {
display: block;
width: 90%;
height: 100%;
text-transform: uppercase;
color: # fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-1px;
padding: 10px;
font-size: 18px;
text-align: center;}
Because 3D Transform does not yet support all browsers like Opera and IE9 so we need to add a CSS.
. Thumb.scroll {
overflow: hidden;}
. Thumb.scroll. Thumb-detail {
bottom:-280px;}
Now, we add 3D Transform for browsers that support.
. Thumb.flip {
-Webkit-perspective: 800px;
-Moz-perspective: 800px;
-Ms-perspective: 800px;
-O-perspective: 800px;
perspective: 800px;}
. Thumb.flip. Thumb-wrapper {
-Webkit-transition:-webkit-transform 1s;
-Moz-transition:-moz-transform 1s;
-Ms-transition:-moz-transform 1s;
-O-transition:-moz-transform 1s;
transition:-moz-transform 1s;
-Webkit-transform-style: preserve-3d;
-Moz-transform-style: preserve-3d;
-Ms-transform-style: preserve-3d;
-O-transform-style: preserve-3d;
transform-style: preserve-3d;}
. Thumb.flip. Thumb-detail {
-Webkit-transform: rotateY (-180Deg);
-Moz-transform: rotateY (-180Deg);
-Ms-transform: rotateY (-180Deg);
-O-transform: rotateY (-180Deg);
transform: rotateY (-180Deg);}
. Thumb.flip img,
. Thumb.flip. Thumb-detail {
-Webkit-Backface-visibility: hidden;
-Moz-Backface-visibility: hidden;
-Ms-Backface-visibility: hidden;
-O-Backface-visibility: hidden;
Backface-visibility: hidden;
-Webkit-border-radius: 5px;
-Moz-border-radius: 5px;
border-radius: 5px;
background-color: # 333;}
. Thumb.flip. FlipIt {
-Webkit-transform: rotateY (-180Deg);
-Moz-transform: rotateY (-180Deg);
-Ms-transform: rotateY (-180Deg);
-O-transform: rotateY (-180Deg);
transform: rotateY (-180Deg);}
Javascript
Finally, we add the Javascript in the <body>
$ (Function () {
/ / Utilize the support modernzr feature class to detect 3D CSS transform support
if ($ ('html'). hasClass ('csstransforms3d')) {
/ / If it's supported, remove the scroll effect flipping instead add the cool card
$ ('. Thumb'). RemoveClass ('scroll'). AddClass ('flip');
/ / Add / remove class flip that make the transition effect
$ ('. Thumb.flip'). Hover (
function () {
$ (This). Find ('. Thumb-wrapper'). AddClass ('flipIt');
},
function () {
$ (This). Find ('. Thumb-wrapper'). RemoveClass ('flipIt');
}
);
Else {}
/ / CSS 3D is not supported, use the scroll up effect instead
$ ('. Thumb'). Hover (
function () {
$ (This). Find ('. Thumb-detail'). Stop (). Animate ({bottom: 0}, 500, 'easeOutCubic');
},
function () {
$ (This). Find ('. Thumb-detail'). Stop (). Animate ({bottom: ($ (this). Height () * -1)}, 500, 'easeOutCubic');
}
);
}
});
Discussion Forum : webmaster forum
No comments:
Post a Comment