Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 20, 2018 at 1:01 pm #929804
    zitronenorange

    Hi there,
    how can I change the color of the overlay in the masonry gallery from transparent black to transparent white and the caption textcolor from white to black?

    March 20, 2018 at 5:19 pm #929974
    Nikko

    Hey Iska,

    Please add this css code in Quick CSS (located in Enfold > General Styling):

    #top .mfp-bg {
    background: rgba(255,255,255,0.8) !important;
}

#top .mfp-title {
    color: black;
}

    Hope it helps :)

    Best regards,
    Nikko

    March 21, 2018 at 1:36 pm #930571
    zitronenorange

    Hi Nikko,
    sorry but the css did not do the job.
    I tried myself and found a not so elegant solution:

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(255,255,255,0.50);
}
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content *, #top .av-caption-style-overlay .av-masonry-item-with-image ins::before, #top #wrap_all .av-caption-style-overlay .av-masonry-item-with-image del {
    color: #000;
}

    Maybe there is a better solution….. but this one works.
    Best regards,
    Iska

    March 21, 2018 at 5:59 pm #930712
    Vinay

    Hi,

    Your CSS is perfect for the overlay. Please try adding this code to change the color of the title text:

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content * {
	color:red !important;
}

    Best regards,
    Vinay

    August 17, 2018 at 5:52 pm #998532
    NR1234

    Hi Enfold Team,

    Our webpage details are provided below.

    I am trying to replicate the same effect of a transparent white overlay which gets removed on mouseover as on the page link below:
    https://kriesi.at/themedemo/?theme=enfold-overview

    Please look at the masonry gallery below “My most recent projects” in the webpage link above.

    While I have got the white overlay on our webpage but on mouseover the overlay does not get removed.

    Can you please suggest some code for that.

    Thanks

    Regards

    Garima

    August 18, 2018 at 9:32 pm #998786
    Victoria

    Hi Garima,

    Best regards,
    Victoria

    August 21, 2018 at 2:55 am #999654
    NR1234

    Hi Victoria,

    The issue still persists. Could you please assist.

    Thanks

    Garima

    August 21, 2018 at 11:21 am #999758
    Victoria

    Hi Garima,

    Could you please attach some screenshots of the issue?

    The section you’re referring to is not on that page.

    Best regards,
    Victoria

    August 22, 2018 at 3:32 am #1000120
    NR1234

    Hi Victoria,

    I am attaching 2 screen shot link. The first is the screenshot of one of the tiles in the masonry gallery on my page where the image stays the same both without mouseover and with mouseover.

    The second screenshot is from the masonry gallery tile (same tile) in the enfold flat business demo webpage (https://kriesi.at/themedemo/?theme=enfold-overview) upon mouseover.

    As you can see on our webpage even on mouseover the overlay does not go away whereas on the enfold demo page mentioned above the overlay gets removed on mouseover and the image becomes sharper.
    null
    Image 2

    Could you please assist.

    Thanks
    Garima

    August 23, 2018 at 8:51 pm #1000939
    Basilis

    Hi,

    The images are not visible, could you please upload somewhere like imgru so we can see them?

    Best regards,
    Basilis

    August 24, 2018 at 4:24 pm #1001297
    NR1234

    Hi Basilis,

    Can you check the below link

    View post on imgur.com

    Ideally the tile should have a white transparent overlay without mouseover like Image 1. On moueover the white overlay should go away and the image should become a bit larger and sharper like Image 2.

    I only get Image 1 effect on masonry gallery and not image 2 effect on mouseover. On mouseover while image becomes larger the white overlay does not go away.

    Can you please suggest some quick css to help.

    Thanks

    Garima

    August 25, 2018 at 10:25 am #1001549
    Victoria

    Hi Garima,

    I treid to check again, but looks like I need to see the credentails to see it.
    Can you please share them in private?

    Best regards,
    Victoria

    August 26, 2018 at 4:48 am #1001803
    NR1234
    This reply has been marked as private.
    August 26, 2018 at 7:11 pm #1001928
    Victoria

    Hi Garima,

    Thank you.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top  #av-masonry-1.av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: transparent;
}
#top #av-masonry-1.av-caption-style-overlay .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {
    background-color: rgba(255, 255, 255, 0.52);
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 27, 2018 at 6:36 am #1002143
    NR1234

    Hi Victoria,

    I have put this code both in quick css and in custom.css

    However, its not made any impact to the webpage am working on. The webpage I need the change to reflect in is shared in private content.

    Could you please have a look.

    Thanks
    Garima

    August 27, 2018 at 3:22 pm #1002305
    NR1234

    Hi Victoria,

    I just restarted my machine and the effect has been reversed with the quick css provided. I want the picture to appear with a white overlay and when mouseover happens the white overlay disappears and the picture becomes brighter.

    However, right now the picture appears bright and when mouseover happens the overlay appears. So i just reversed the quickk css you provided me and it works.

    Thanks for your help.

    Garima

    August 27, 2018 at 3:36 pm #1002311
    Victoria

    Hi cdwiegand,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.