WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3D CSS Photo Frame Effect to Images
1323
ledoc
Open In Editor
Publish Your Code
Recommended
21 August 2024
Search Input
27 November 2024
Cards Products
17 May 2025
modern web sit
HTML
Copy
CSS
Copy
.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); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */