Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 17, 2016 at 7:39 pm #599920
    CatherineCBrand

    Hello,

    I modified my porfolio grid CSS, following one of your treads (https://kriesi.at/support/topic/portfolio-grid-add-excerpt-under-title/), to have the title of the portfolio item appear on hover, instead of the default arrow. Everything works well, but I would like to add a padding on both sides of the title to make sure that it doesn’t appear too close to the right and left borders, as shown in the link below, but wraps instead on the next line.

    I would also like to make sure that when the user clicks on the image on a mobile device 1) the dark blue background and title appear 2) the user clicks a second time 3) the user sees the portfolio item page. Currently, the user is directly directed to the portfolio item page, without seing its title, as the hover effect doesn’t work on mobile devices.

    Could you please help me on this?
    Many thanks,
    Catherine

    March 21, 2016 at 6:44 am #601048
    Ismael

    Hi CatherineCBrand!

    Thank you for using Enfold.

    Add a padding property to the .grid-image:before selector. Replace the css code with this:

    .grid-image:before {
    content: attr(title); 
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    display: none;
    font-weight: 200;
    font-size: 24px;
    color: #ffffff !important;
    top: 50%;
}

.grid-image:hover:before {
    opacity: 0.9;
   display: block;
}

    Regards,
    Ismael

    March 24, 2016 at 11:32 am #602937
    CatherineCBrand

    Great!

    Many thanks,
    Catherine

    March 25, 2016 at 6:32 am #603563
    Jordan

    Hi Catherine!

    Glad it worked and thanks for using Enfold! If you have the time, please rate the Enfold theme on Themeforest.

    Cheers!
    Jordan

    March 17, 2017 at 5:15 pm #762590
    Benoit

    Hi Guys and thanks for the tips.

    I managed to have the title when hover the images but, I would like to replace the title under the images and have the excerpt instead.

    Title on hover & excerpt under the images. Is that possible?

    Thanks

    March 17, 2017 at 8:08 pm #762701
    Basilis

    Hi!

    There is nothing simple for that, we are afraid.
    The best option is to hire someone who can help you with that type of the modification, by creating a child theme and connecting Enfold shortcodes.

    Thanks a lot

    Cheers!
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Enfold Portfolio grid – Title and hover effect on mobile’ is closed to new replies.