-
Posts
-
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!
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,
NikkoHello,
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!
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.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!
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
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,
NikkoHi,
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.
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,
Nikkohttp://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%;
}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,
Nikkohi!
Here is the link http://www.witschurke.deThanks for your help!!
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!
NikkoHello,
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!
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,
NikkoHello,
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
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!
NikkoHi,
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
- You must be logged in to reply to this topic.