Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #722041

    Hello,
    I would like to know if it is posible to edit the masonry caption effects to first show all the pictures from the masonry black and white and turn them into color when you place the mouse over them.

    Thank you for your help!

    #722081

    Hey witschurke,

    Try adding this code in Quick CSS (located in Enfold > General Styling):

    
    #top .av-masonry .av-masonry-image-container {
        filter: grayscale(100%);
    }
    
    #top .av-masonry .av-masonry-image-container:hover {
        filter: grayscale(0);
    }
    

    This might not work on older browsers but should work on modern browsers, hope this helps.

    Best regards,
    Nikko

    #722376

    Hello,
    thank you very much for your help. I think the code is not completely correct or maybe my Mozilla (50.0.2) version is a bit old. The masonry pictures have turned to grayscale now but they do not get coloured when I place the mouse over them.

    Thank you once again!

    #722398

    Hey!

    The latest version of mozilla is 50.0.2, it should work there, I have tested it in same version as you have of mozilla and works fine on my end. Can you post a link to your site? so we can inspect further, you can place the link in “private content” so only moderators can see.

    Best regards,
    Nikko

    #722401

    .av-masonry-image-container {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
    -webkit-transition: all .6s ease;
    }
    .av-masonry-image-container:hover {
    filter: grayscale(0%);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    }
    Hello, i have used this code but it only works when I select on Masonry options>element captions>Default display (at the bottom of the elements image)
    I would like the effect to take place with the element caption displayed as centered overlay (overlays the image)

    Than you!

    #723221

    Hello,
    I am still trying to display the effect with the text overlayed centered but it seems that it does not work. I would like to know if it is posible to generate that effect with a Quick CSS.

    Thank you

    #723417

    Hi,

    Can you post a link where the code above doesn’t work? so we can inspect further. I have tried to use your code (which is more backward compatible, and is better than the code I gave) on my local server and tested with the settings you gave but don’t have any issues mentioned.

    Best regards,
    Nikko

    #723697

    Hi,
    I will try to upload the site from my local host to my online server today and probably during the next days (it is my first time doing this), as soon as the site is online I will send you the link. Could you show me an example of a site where the effect works with the text centered over the masonry picture, please?

    Thank you for your help.

    #723847

    Hey,

    I can’t remember where I’ve seen something like that but if you’re masonry gallery is like this: http://kriesi.at/themes/enfold/portfolio/masonry-portfolio/ I think you can just add this css code to Quick CSS and it should center the text:

    #top .av-masonry .av-inner-masonry-content {
        align-items: center;
        background: transparent;
        display: flex !important;
        justify-content: center;
        height: 100%;
        text-align: center;
        width: 100%;
    }

    You might want to change a bit of that code to make it more backward compatible. Just let us know if it’s up and we’ll try to help you as long as it’s under our scope :)

    Regards,
    Nikko

    #724863

    http://www.witschurke.de/home/?preview_id=677&preview_nonce=d3dbeedf91&_thumbnail_id=-1&preview=true

    Hello,
    here is the effect that I get when I introduce that code, I would like the text to appear in the middel of the foto instead of from the down party moving until the middle. I do not know why the masonry picture turns coloured and then comes back to black and white.

    Thank you very much!

    Here are all the CSS that I have introduced already:

    .main_color .av-masonry {
    background-color: white;
    }

    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    animation: none;
    }

    .av-masonry .avia-arrow {
    display: none !important;
    }

    #top figcaption.av-inner-masonry-content,
    #top figcaption.av-inner-masonry-content .av-masonry-entry-title {
    background: transparent !important;
    }

    span.av-masonry-date.meta-color.updated {
    display: none;
    }

    .av-masonry-image-container {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
    -webkit-transition: all .6s ease;
    }
    .av-masonry-image-container:hover {
    filter: grayscale(0%);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    }

    .av-masonry-entry .av-inner-masonry-content h3 {
    color: #e5e5e5!important;
    }

    #top .av-masonry .av-inner-masonry-content {
    align-items: center;
    background: transparent;
    display: flex !important;
    justify-content: center;
    height: 100%;
    text-align: center;
    width: 100%;
    }

    #725456

    Hey!

    I couldn’t see the link, you can only see the preview if you have an admin account I think. Can you publish it and post the link?

    Best regards,
    Nikko

    #725505

    hi!
    Here is the link http://www.witschurke.de

    Thanks for your help!!

    #725571

    Hey!

    Try to replace this code:

    .av-masonry-image-container:hover {
    filter: grayscale(0%);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    }

    To this one:

    .av-masonry-entry.isotope-item:hover .av-masonry-image-container {
      filter: grayscale(0%);
      -webkit-filter: none;
      -moz-filter: none;
      -ms-filter: none;
      filter: none;
    }

    Hope this helps :)

    Cheers!
    Nikko

    • This reply was modified 2 years, 7 months ago by  Nikko.
    #725738

    Hello,
    I have changed the code but it doesnt work exactly how I want it. I think that the code that is wrong written is the on that makes the text move to the center of the image, if I delete that code the picture keeps coloured with the mouse over. With the new code the image change to color when I place the mouse over it and goes back to b/w when I move again over the picture (dont know it this is normal or just maybe an error from browser.

    Thanks once again for all your help, this is a really great service!

    #725773

    Hi!

    Thanks for your kind words :) I have fixed the last code I gave, I see a space between .av-masonry-entry.isotope-item and :hover. I did try the code you have and experienced the same effect but was fixed when I changed the code as what I suggested in my last post. If this still doesn’t work as expected, can you give us temporary admin access, so we can try to fix it on your end, and would tell you what we changed.

    Regards,
    Nikko

    #729834

    Hello,
    I haven´t managed yet to fix the effect exactly how I would like it to be. Any extra help is welcome, thanks!

    Best regards

    #730226

    Hey!

    Can you give us temporary admin access? so we can atleast check the backend and probably find what’s causing it not to work.

    Cheers!
    Nikko

    #730392

    Hello,
    I send you here the access information

    #730958

    Hi,

    The account you gave is not an admin account so I could not take a look at your backend. Also if I check the css being fetched in Quick CSS (refer to the link below “private content”) this code needs to be removed:

    .av-masonry-image-container:hover {
    filter: grayscale(0%);
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    }

    and I can see this code being fetched missing a } (closing curly brace):

    .av-masonry-image-container {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */

    Cheers!
    Nikko

    #731072

    Hello,
    Thank you very much, it finally worked!!

    Thanks!!

    #731373

    Hey!

    Glad we could help. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 21 posts - 1 through 21 (of 21 total)

You must be logged in to reply to this topic.