Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 12, 2015 at 7:26 pm #378476
    CharlieTh

    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, 11 months ago by CharlieTh.
    January 13, 2015 at 2:22 pm #378772
    Yigit

    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

    January 14, 2015 at 6:31 pm #379635
    CharlieTh

    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!)

    January 15, 2015 at 9:16 am #379912
    Ismael

    Hey!

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

    Best regards,
    Ismael

    January 15, 2015 at 4:17 pm #380051
    CharlieTh

    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.

    January 16, 2015 at 8:27 am #380624
    Ismael

    Hi!

    Alright. You can try this on Quick CSS:

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

    Regards,
    Ismael

    February 6, 2015 at 2:33 am #391800
    CharlieTh

    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.

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