Efecto de marco de fotos CSS 3D para imágenes

2,422 0 ledoc Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Efecto de marco de fotos CSS 3D para imágenes

Recomendado

27 April 2025

Un código de Metehan

6 May 2026

dinosaurio

29 December 2025

Control deslizante de imágenes HTML CSS JavaScript

HTML

CSS

.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);
}

Comments 0

…