Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 13, 2014 at 10:11 pm #350936
    Kevin

    Hello Support,

    http://pmgl.bydecosta.com/clients/entertainment/

    Is it possible to have the “Title” always display and when you put the mouse on top of the image then have the “Excerpt” will display.

    On the editor you only have an option to Display Title and Excerpt hover on display.
    We need the title always display but the excerpt display on mouse hover

    Below is a rough example of how we want it to work.

    Thanks again.

    MP

    November 14, 2014 at 5:24 pm #351338
    Elliott

    Hi Marcelo!

    This is bordering on custom work because to get it exactly how your wanting is going to take a lot of time and code so it would be best to hire a freelancer to help you out.

    But if you want to try and tackle it on your own then you can use this CSS to get started.

    .av-inner-masonry:hover .av-masonry-entry-content {
    display: block;
}
.av-masonry-entry-content {
    display: none;
}

    That will display the excerpts only on hover.

    Cheers!
    Elliott

    November 14, 2014 at 6:22 pm #351411
    Kevin

    Hello Elliot,

    I copied the css code under the “Quick CSS”.

    http://pmgl.bydecosta.com/clients/entertainment/
    When I check the Entertainment Page, I’m not seeing the “Title” always visible and only display the “Excerpt” on Mouse Over.

    The Masonry Settings are still setup as before:
    Display Title and Excerpt
    Display on mouse hover

    BTW: Other Support Moderators have always helped us out doing customizations to the sites that we have built with the Enfold theme without a problem.

    Thanks again,
    MP

    November 15, 2014 at 8:26 pm #351892
    Elliott

    Hey!

    You need to have the title and excerpt set to always display.

    You can keep adding CSS to style the excerpt to get it to display like how your wanting.. something like this.

    .av-inner-masonry:hover .av-masonry-entry-content {
    display: block;
    position: absolute;
    top: -50px;
    left: 0px;
    width: 80%;
}

    etc etc, but really what your trying to do is not going to work great on mobile devices and to make it do what your wanting would take a lot of troubleshooting and scripting which is why I said it’s bordering custom work.

    Regards,
    Elliott

    November 18, 2014 at 5:58 pm #353117
    Kevin

    Thanks Elliott the code you provided works.

    I changed the background of the excerpt to red and gave it an opacity background”
    .av-inner-masonry:hover .av-masonry-entry-content {
    display: block;
    }

    .av-masonry-entry-content {
    display: none;
    }

    .av-inner-masonry:hover .av-masonry-entry-content {
    display: block;
    position: absolute;
    top: -100px;
    left: 0px;
    width: 100%;
    background: red;
    opacity:0.9;
    color: #ffffff;
    text-align: center;
    }

    Is there a way to make the excerpt display like the following?

    Currently it looks like this:

    Thanks,
    MP

    • This reply was modified 10 years, 1 month ago by Kevin.
    November 18, 2014 at 11:33 pm #353338
    Elliott

    Hi!

    Unfortunately I don’t see an easy way of doing that with just CSS. Like I said before it’s not going to look perfect on all devices so it would be best to hire a freelancer to help you out as it’s going to take a lot of time and code to get it working exactly how your wanting.

    Best regards,
    Elliott

    December 16, 2014 at 5:08 pm #368985
    Kevin

    Thanks for your help.

    MP

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Portfolio Entries Masonry Title & Excerpt Question’ is closed to new replies.