Cómo diseñar una sección con un efecto hover degradado de fondo (background gradient) en divi

Cómo diseñar una sección con un efecto hover de degradado de fondo (background gradient) en divi.

Hace unos días un suscriptor me ha enviado este sitio web para preguntarme si era posible realizar el efecto de la sección «servicios» con divi.

La composición consiste en tener 4 servicios divididos en dos filas de dos columnas, pero esto no es lo más interesante, lo más llamativo es el efecto que cada uno de los servicios tiene, el cual consiste en un efecto hover que se logra apreciar al ir pasando el cursor sobre cada servicio. Si estás viendo la página de ejemplo podrás apreciar que al pasar el cursor sobre cada uno de los servicios, al servicio se le aplica un color gradiente de fondo y a la sección principal que contiene todos los servicios también se le aplica el mismo color degradado de fondo ¡Wooow!

A simple vista podríamos pensar que este efecto se puede realizar fácilmente con divi, y si, tienes razón, es un efecto que podemos lograr con divi pero si o si serán necesarios pequeños fragmentos de código para lograr dicha funcionalidad.

¡No te preocupes! Fiel a la costumbre de OV DIVI a continuación te dejo todo los códigos que necesitamos para lograr este increíble efecto, yo ya he hecho el trabajo «rudo» para que tú solamente tengas que copiar y pegar. Eso sí, para que sepas dónde pegar cada uno de los fragmentos solamente tienes que seguir el paso por paso que realizo en el video.

 
CÓDIGOS

Código CSS para cambiar el color de los elementos de las columnas en hover:

/* Cambiar el color de los elementos de las columnas en hover */
.ov-fila .et_pb_column:hover h3,
.ov-fila .et_pb_column:hover h4,
.ov-fila .et_pb_column:hover p,
.ov-fila .et_pb_column:hover span {
  color: #fff !important;
}

Código CSS de los colores degradados de cada uno de los fondos:

#ov-cambiar-fondo:after {
  content: "";
  background-image: linear-gradient(135deg,#f9fafc 0%,#f9fafc 100%);
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  transition: all .8s; 
}

/* Colores degradados de fondo */
.degradado-1:after {
  background-image: linear-gradient(135deg,#ff2a72 0%,#f4a05a 100%) !important;
  opacity: 1 !important;
  transition: all .8s; 
}

.degradado-2:after {
  background-image: linear-gradient(135deg,#ffd519 0%,#f89440 100%) !important;
  opacity: 1 !important;
  transition: all .8s; 
}

.degradado-3:after {
  background-image: linear-gradient(135deg,#15a6ea 0%,#29cfda 100%) !important;
  opacity: 1 !important;
  transition: all .8s; 
}

.degradado-4:after {
  background-image: linear-gradient(135deg,#86cc52 0%,#46d3b0 100%) !important;
  opacity: 1 !important;
  transition: all .8s; 
}

Código jQuery para aplicar la funcionalidad hover del degradado de fondo a la sección principal:

<script>
jQuery(document).ready(function( $ ) {
  
  // Hover columna 1
  $('.ov-columna-1-hover').mouseenter(function(){
    $('#ov-cambiar-fondo').addClass('degradado-1');
  });
  $('.ov-columna-1-hover').mouseleave(function(){
    $('#ov-cambiar-fondo').removeClass('degradado-1');
  });
  
  // Hover columna 2
  $('.ov-columna-2-hover').mouseenter(function(){
    $('#ov-cambiar-fondo').addClass('degradado-2');
  });
  $('.ov-columna-2-hover').mouseleave(function(){
    $('#ov-cambiar-fondo').removeClass('degradado-2');
  });
  
  // Hover columna 3
  $('.ov-columna-3-hover').mouseenter(function(){
    $('#ov-cambiar-fondo').addClass('degradado-3');
  });
  $('.ov-columna-3-hover').mouseleave(function(){
    $('#ov-cambiar-fondo').removeClass('degradado-3');
  });
  
  // Hover columna 4
  $('.ov-columna-4-hover').mouseenter(function(){
    $('#ov-cambiar-fondo').addClass('degradado-4');
  });
  $('.ov-columna-4-hover').mouseleave(function(){
    $('#ov-cambiar-fondo').removeClass('degradado-4');
  });

});
</script>

Descargar JSON desde