Caption hover effect

Hey opvab,

Well, it’s a different set up in terms of html and css.

Can you show us what you’ve got so far?

Best regards,
Victoria

Hi opvab,

I think you almost made it.
Try to put the content after the title and hide it then on hover make it visible and content area expand.
Hope this tip helps.

Best regards,
Nikko

Hi OPVAB,

Yes, can you give us admin access? so we can try to make some modifications on your end.
Just post the details in private content, so it’s only visible to the moderators.

Best regards,
Nikko

Hi OPVAB,

Thanks for giving us admin access.
I have checked Show element options for developers in Enfold > Layout Builder.
Then on the page, I used a grid row to create 3 columns then added in Custom CSS Class: custom-grid
In your Quick CSS (located in Enfold > General Styling), I added this code:

.custom-grid .flex_cell {
    padding: 0 !important;
}

.custom-grid .flex_cell_inner {
    position: relative;
}

.custom-grid .av_textblock_section {
    background: rgba(0,0,0,0.5);
    padding: 20px 20px 10px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 100;
}

.custom-grid .avia-image-container-inner, .custom-grid .avia-image-container-inner .avia_image {
    width: 100%;
}

.custom-grid .av_textblock_section h3 {
    font-size: 28px;
}

.custom-grid .av_textblock_section p {
    display: none !important;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    transition: opacity .4s linear;
}

.custom-grid .flex_cell_inner:hover .av_textblock_section p {
    display: block !important;
    opacity: 1;
    filter: alpha(opacity=100);
}

The only thing remaining is the animation which can be done via javascript which would take sometime to do and outside the scope of our support.

Best regards,
Nikko

Hi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Basilis