La semana pasada publicamos trucos CSS de Origin Theme y recibimos algunos comentarios sobre cómo aplicar los efectos dentro de Divi. A continuación hay una serie de trucos de CSS para ayudarlo a personalizar su proyecto Divi Theme y las miniaturas de productos. Cada ejemplo tiene una vista previa animada y un bloque de CSS personalizado necesario para lograr el efecto. Como siempre, le recomendamos que agregue todo el CSS personalizado a través de un tema secundario o el cuadro de CSS personalizado en ePanel.
De forma predeterminada, las superposiciones de proyectos y productos simplemente se desvanecen. El CSS a continuación modificará la superposición para hacer zoom y desvanecerse, con una animación inversa cuando el cursor se desplaza.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
.et_overlay { -webkit-transform: scale(.9); -moz-transform: scale(.9); -o-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9);}.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} |
Superposición deslizable hacia arriba
El CSS a continuación modificará la superposición para que aparezca y suba gradualmente desde la parte inferior de la miniatura, con una animación inversa cuando el cursor se desplace.
|
01
02
03
04
05
06
07
|
.et_overlay { top:30px;}.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ top:0;} |
Giro superpuesto
El CSS a continuación modificará la superposición para que gire y se acerque, con una animación inversa cuando el cursor se desplace.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
.et_overlay { -webkit-transform: scale(.6) rotate(-30deg); -moz-transform: scale(.6) rotate(-30deg); -o-transform: scale(.6) rotate(-30deg); -ms-transform: scale(.6) rotate(-30deg); transform: scale(.6) rotate(-30deg);}.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{ -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);} |
Subida de desplazamiento de miniaturas
El CSS a continuación hará que toda la miniatura se eleve ligeramente de la página al pasar el mouse. La superposición se ha eliminado para este efecto, pero puede dejarla si lo desea.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
.et_overlay { display:none;}.et_portfolio_image, .et_shop_image { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}.et_portfolio_image:hover, .et_shop_image:hover { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -o-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04);} |
Borde de la miniatura del proyecto
El CSS a continuación agregará un borde a las miniaturas de su proyecto. El siguiente ejemplo se combina con el ejemplo de «Deslizar hacia arriba» anterior, pero se puede combinar con cualquier modificación adicional o sin ella.
|
01
02
03
04
05
06
|
.et_portfolio_image{ border: 5px solid #fff; -moz-box-shadow: 0 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.3);} |
Superposición de colores personalizados
Simplemente puede modificar los colores y estilos existentes con el CSS a continuación. Estas modificaciones le permitirán definir el color de fondo de la superposición, el estilo del borde, el color del icono y la opacidad de la superposición.
|
01
02
03
04
05
06
07
08
09
10
|
.et_overlay { background: rgba(50, 200, 235, 0.6); /* overlay background color */ border: none; /* border style */}.et_shop_image .et_overlay:before, .et_portfolio_image .et_overlay:before{ color: #FFF !important; /* + icon color */}.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; } /* overlay opacity */ |
Si le gustó este consejo temático, dé un paseo por el blog para obtener más de nuestros recursos gratuitos y háganos saber cuál debería ser nuestro próximo consejo temático.