Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #633242

    Hi, I am trying to alter the way the Masonry Gallery behaves on Mouseover. The client would like to use this as the management team page, and wants to have the Name and title appear at the bottom of the image, then on mouseover, show the excerpt. Is this possible?

    Thanks. Link to the page in question is in the private content

    #634262

    Hey,

    You can use something like this (CSS):

    .avia_desktop.avia_transform3d .av-caption-on-hover.av-caption-style- .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content{
        -webkit-transform: 	rotateX(0deg) translateY(90px);
        transform: 			rotateX(0deg) translateY(90px);
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    
    .avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content{
        opacity: 1; 
        filter: alpha(opacity=100);
    }
    
    .avia_desktop.avia_transform3d .av-caption-on-hover.av-caption-style- .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content{
    
        -webkit-transform: 	rotateX(0deg) translateY(0);
        transform: 			rotateX(0deg) translateY(0);
    
    }

    But you’d need to equalize the element’s header and excerpt.

    Best regards,
    Josue

    #635326

    Thanks, this is a great start. Just trying to figure out how to show more of the photo, by moving the overlay down and increasing the height of the entire element.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Edit Title, Excerpt locations in Masonry Gallery’ is closed to new replies.