WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito de moldura de foto CSS 3D para imagens
1191
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
22 May 2025
Jogo de cara ou coroa
9 July 2025
Iframe responsivo com navegação de visualização do dispositivo
14 September 2024
Interação com Pôster de Filme
HTML
Copy
<div class="photo-frame"> <img src="https://www.007.com/wp-content/uploads/2018/05/smoking007_WEBSITE_IMAGE_SIZE_LANDSCAPE-917x677.png" /> </div>
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) */
