This is a little Trick to create simple animated hover effects for thumbnails in Divi.
A video tutorial will follow soon!
This is the code that needs to be added to the Divi Theme Options:
.thumbnail_hover{
transition: all 0.5s cubic-bezier(.2,0,0,1);
width:100%;
z-index:2;
display: flex;
flex-direction: column;
justify-content: center;
overflow:hidden;
}
.thumbnail_hover:before{
content:"";
background-color: inherit;
transition: inherit;
opacity:0;
width:100%;
padding-bottom:100%;
z-index:1;
}
.thumbnail_hover:hover::before{
opacity:1;
}
.thumbnail_hover .et_pb_text_inner{
position:absolute;
opacity:0;
transform: translateY(50%);
transition: inherit;
width:100%;
z-index:2;
}
.thumbnail_hover:hover .et_pb_text_inner{
transform: translateY(0%);
opacity:1;
}
.thumbnail_hover .et_pb_section_video_bg{
z-index:0;
}
This is the code for the Column:
display: flex;
justify-content: center;
flex-wrap: wrap;