Hi, we’ll see how to add a stunning 3D CSS Photo Frame Border Effect to Images on mouse hover in this tutorial. Adding some fancy border effects to images will spice up the look of the images used in website. Doing so doesn't need any image processing software’s like Photoshop. With CSS3, now we can add such image border effects easily with few lines of code.
Earlier in one of our CSS Image Border Effects tutorial we've discussed about adding a patterned picture frame to an image. Now we'll see about adding a 3D Image frame with CSS on mouse hover. Adding multiple shadows to the image with CSS box-shadow property will do the 3D trick combined with little bit of animation.
Add 3D CSS Photo Frame Effect
Step-1: First let's write the required HTML Markup. Wrap an image inside a <div> block and add a CSS class element photo-frame to the <div> element.
<div class="photo-frame"> <img src="images/daisy.jpg" /> </div>
Step-2: Next add the styles to the css class photo-frame and <img> element.
.photo-frame img {
width: 400px;
height: 300px;
}
.photo-frame {
background-color: #FEFEFE;
width: 400px;
height: 300px;
padding: 20px;
box-shadow: 0px 0px 5px 0px #AAA;
-moz-box-shadow: 0px 0px 5px 0px #AAA;
-webkit-box-shadow: 0px 0px 5px 0px #AAA;
transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
Step-3: Since I want the 3D effect on mouse hover, just add :hover selector to the above css class. Add box-shadow and transform properties to make the image frame to grow in thickness to give the desired 3D effect.
.photo-frame:hover {
box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-moz-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-webkit-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
transform: translate(-8px,-8px);
-ms-transform: translate(-8px,-8px);
-moz-transform: translate(-8px,-8px);
-webkit-transform: translate(-8px,-8px);
-o-transform: translate(-8px,-8px);
}
Step-4: Finally to make this transformation smoother, let us add css transition property to the class.
.photo-frame:hover {
box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-moz-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-webkit-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
transform: translate(-8px,-8px);
-ms-transform: translate(-8px,-8px);
-moz-transform: translate(-8px,-8px);
-webkit-transform: translate(-8px,-8px);
-o-transform: translate(-8px,-8px);
transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
Demo
Please roll the mouse over image to see the 3D CSS Picture Frame Effect
The complete code for the css image effect we’ve created is here.
<!DOCTYPE html>
<html>
<head>
<title>3D CSS Photo Frame Effect</title>
<style type="text/css">
body {
background-color: #F0F0F0;
}
.photo-frame img {
width: 400px;
height: 300px;
}
.photo-frame {
background-color: #FEFEFE;
width: 400px;
height: 300px;
padding: 20px;
box-shadow: 0px 0px 5px 0px #AAA;
-moz-box-shadow: 0px 0px 5px 0px #AAA;
-webkit-box-shadow: 0px 0px 5px 0px #AAA;
transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.photo-frame:hover {
box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-moz-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
-webkit-box-shadow: 1px 1px 1px 0px #999,
2px 2px 1px 0px #888,
3px 3px 1px 0px #777,
4px 4px 1px 0px #666,
5px 5px 1px 0px #555,
6px 6px 1px 0px #444,
7px 7px 1px 0px #333,
8px 8px 3px 0px #303030;
transform: translate(-8px,-8px);
-ms-transform: translate(-8px,-8px);
-moz-transform: translate(-8px,-8px);
-webkit-transform: translate(-8px,-8px);
-o-transform: translate(-8px,-8px);
transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
</style>
</head>
<body>
<div class="photo-frame"><img src="images/daisy.jpg" /></div>
</body>
</html>
If you enjoy this CSS Photo Frame Tutorial, Please follow us on Facebook/Twitter and help spread our word.
No comments:
Post a Comment