Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 16, 2016 at 8:27 pm #633242
    janetgot

    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

    May 18, 2016 at 10:01 am #634262
    Josue

    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

    May 19, 2016 at 5:12 pm #635326
    janetgot

    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.

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