Hello,
I send you here the access information

Thanks. I uploaded everything already!

Best regards

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!

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%;
}

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.

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

Thank you! It worked perfectly.