Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 21, 2017 at 7:18 pm #781357
    tremblayly

    Hi

    Is it possible to replicate the three image captions display style, within Enfold, as on this website: http://groupecfc.com/

    Thanks
    Lyse

    April 21, 2017 at 8:24 pm #781377
    Basilis

    Hi tremblayly!

    That could be possible, but would require some custom CSS to make it happen.
    The best option is to hire someone to help you with that process.

    let us know if there is anything else we can do for you

    Regards,
    Basilis

    April 21, 2017 at 9:48 pm #781422
    tremblayly

    Hi Basilis,

    I guess it’s too complicated and would take too much time within this support group. I know some CSS but this one I’m not quite sure how to replicate and where to look for possible examples.

    Thanks
    Lyse

    April 22, 2017 at 7:27 am #781577
    Rikard

    Hi Lyse,

    If you should need any help along the way of achieving that then please post a link to the site you are working on so that we can have a closer look.

    Best regards,
    Rikard

    April 22, 2017 at 5:45 pm #781719
    tremblayly

    Hi Rikard,

    My website is here: http://crescendo.staging.wpengine.com/fr/ (hosted on WPengine)

    Thank you
    Lyse

    April 23, 2017 at 10:54 pm #782079
    tremblayly

    Hi Rikard,

    I found a CSS code snippet that has the hover effect that I want except text is not centered (https://tympanus.net/Development/HoverEffectIdeas/index.html). I’m struggling on which element(s) to apply the CSS styling to within the theme. In the caption or image or both?

    Here’s the CSS code snippet:

    figure.effect-lily img {
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
    }

    figure.effect-lily figcaption {
    top: auto;
    bottom: 0;
    height: 50%;
    text-align: left;
    }

    figure.effect-lily h2,
    figure.effect-lily p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
    }

    figure.effect-lily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    }

    figure.effect-lily p {
    color: rgba(255,255,255,0.6);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
    }

    figure.effect-lily:hover img,
    figure.effect-lily:hover p {
    opacity: 1;
    }

    figure.effect-lily:hover img,
    figure.effect-lily:hover h2,
    figure.effect-lily:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    figure.effect-lily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    }

    Any help to integrate this effect into my page would be greatly appreciated.

    Thanks
    Lyse

    April 27, 2017 at 7:32 am #783827
    Ismael

    Hi,

    Add a grid row element and apply a unique ID to it, “custom-grid” for example. Create 3 cells and apply an image background to each cell. Add the title and the text inside a text block element and then add this css code. It’s not exactly the same as the example in the site but the same concept.

    #custom-grid .avia_textblock {
    position: absolute;
    bottom: -300px;
    opacity: 0;
}

#custom-grid .flex_cell:hover .avia_textblock {
    opacity: 1;
     bottom: 20px;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}

    Adjust the values as needed.

    Best regards,
    Ismael

    April 27, 2017 at 9:51 pm #784221
    tremblayly

    Hi Ismael,

    I can, within the existing Enfold caption, create what you provided. What I’m looking for is two separate caption transformation. I don’t know the Enfold elements I need to change to make this happen.

    Thanks
    Lyse

    April 29, 2017 at 5:16 pm #785031
    tremblayly

    Hi Ismael,

    I found another alternative solution in another thread because the hover effect does not work on mobile devices. Also my client absolutely wants text to display on load on mobile devices, we changed the hover effect to be static on mobile devices. We also added the second part of the caption text below the image.

    Thank you so much for all of your efforts and patience.

    You may close this ticket.

    Lyse

    April 30, 2017 at 8:35 pm #785389
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Image caption’ is closed to new replies.