New Landing How can we help? Atelier Multi Size Masonry Display

Viewing 8 posts - 1 through 8 (of 8 total)
  • Posted in: Atelier
  • #179802
    sandraeddy04
    Member
    Post count: 47

    In addition to the caption that appears on hover, would it be possible to display a short excerpt below each image as well (that would always be visible, not just on hover)? So essentially the “Why Qantas” would appear on hover and the “from our customers” would always be visible. Thank you!

    http://www.discoverqantas.com/?page_id=8

    #179981
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    At the moment isn’t possible has default to achieve that.

    Will forward your suggestion to the development team so it can be consider in a future update.

    -Rui

    #180043
    sandraeddy04
    Member
    Post count: 47

    That would be great, thanks! In the meantime I think I actually figured out a workaround. 🙂

    #180049
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    That’s Great.
    -Rui

    #181274
    harshayejju
    Member
    Post count: 11

    SandraEddy,

    Can you please share your workaround?

    Harsha

    #181600
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Let’s wait to see if @SandraEddy can kindly share that information.
    -Rui

    #181602
    sandraeddy04
    Member
    Post count: 47

    Sure thing! Here’s the code I added to the custom CSS box (I have the standard thumbnail style selected, not the alt in the theme options). I also moved the headline to appear on hover below the static caption and decreased the gutter width, but you don’t have to include those sections if you don’t want. Hope this helps!

    /*change hover transition of caption headline*/
    figure.animated-overlay figcaption .thumb-info h4, figure.animated-overlay figcaption .thumb-info h5, figure.animated-overlay figcaption .thumb-info h6, figure.animated-overlay figcaption .thumb-info .gm-hover-price-wrap {
    transform: translate3d(0px,90px,0);
    opacity: 0;
    transition: all .4s;
    }

    figcaption .thumb-info {
    vertical-align: top;
    margin-top: -14px;
    }

    figure.animated-overlay figcaption {
    height: 32%;
    top: 68%;
    transform: translateY(10px);
    opacity: 1;
    }

    figure.animated-overlay:hover figcaption {
    opacity: 1;
    transform: translateY(0px);
    }

    /*move position of caption headline*/
    figure.animated-overlay:hover figcaption .thumb-info h4 {
    transform: translate3d(0,70px,0);
    }

    /*change gutter width*/
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
    }

    #181623
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Great, thanks

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register