Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #378476

    I would like to recreate look like this.
    http://www.wholefoodsmarket.com/

    Which masonry should I start working with? (Currently working with Masonry Gallery as tester.)

    Which CSS should I target to change styling of the captions, as shown?

    Guess that would be NORMAL captions and also HOVERED captions?

    Below changes ALL captions backgrounds — but doesn’t change font size or color. Only Backgrounds.
    .av-inner-masonry-content{background-color: orange!important;}

    I tried in Edit > Media to use CSS in Title and Caption and it does what I want, but I would prefer more “global” solution, so don’t have to
    dit title and caption for each individual image in Media.

    NOTE that hover works with the IMAGE somehow, but does nothing with the title and caption. Can I change hover effect for title and caption, too?

    Thank you!

    • This topic was modified 9 years, 10 months ago by CharlieTh.
    #378772

    Hi CharlieTh!

    You can use Masonry element or Portfolio Grid element and create your elements as Portfolio items.
    You can use following CSS code

    .av-masonry-entry .av-masonry-entry-title { font-size: 20px; }
    .av-masonry-entry-content.entry-content { font-size: 16px; }
    .av-inner-masonry-content:hover { background-color: red!important; }

    Such feature is not available on Enfold currently, please feel free to request it here – https://kriesi.at/support/enfold-feature-requests/
    If you need it urgently, you are going to need to hire a freelance developer.

    Regards,
    Yigit

    #379635

    Just what I needed to change font size for normal stuff.

    I also did the first item above with :hover after it.

    That will change color, font, whatever when I hover over the title line itself.

    Is there any way to specify the title when I hover over the masonry image itself?

    (But, yes, you answered EXACTLY what I first asked. Now, I’m just getting greedy!)

    #379912

    Hey!

    You can only edit the image title on the Media Library panel.

    Best regards,
    Ismael

    #380051

    I misspoke. What I meant to say (and although Enfold is wonderful, it doesn’t read minds!) is: “Is there any way to specify a color change of the TITLE via CSS when you hover over the masonry box or image?”

    So, hover over image, see av-inner-masonry-content:hover change of red appear…

    Otherwise, in order to see the av-inner-masonry-content:hover of red, you would have to hover over the actual area you want to turn red.

    Is this any clearer? I can try again.

    #380624

    Hi!

    Alright. You can try this on Quick CSS:

    .av-masonry-entry.isotope-item:hover .av-masonry-entry-title {
    color: red !important;
    }

    Regards,
    Ismael

    #391800

    Once again, you guys get a perfect 10. EXACTLY what I was looking for — and I fear I didn’t EXPLAIN what I was looking for at all well.

    Thank you. I am delighted.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Masonry Gallery – color captions’ is closed to new replies.