-
Posts
-
Hey Team Enfold,
looking for a soulution having images black-and-white and colorful on mouse-over.
Wasn’t there a default setting?!
Thank you for your help :)
ThomasHey ThomSchu,
Add this to quick css:
#main img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; } #main img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: none; } .image-overlay { display: none !important; }Best regards,
Jordan ShannonHi Tom,
Well, the original images have to have color, I saw only black and white images on the front page.
Best regards,
Victoriaon masonry or on image alb element?
On Masonry there is an option on advanced tab – image effect: greyscale effect.On images as Victoria has already said : they have to be uploaded and inserted as colored images first – then they were set to grayscale by css.
if you do not want to have it on all images ( see jordans css with #main as first selector ) – i would give a custom class like: gray-to-color to the image element – then this to quick css:.avia-image-container.gray-to-color img { -webkit-filter: grayscale(1); filter: grayscale(1); } .avia-image-container.gray-to-color img:hover { -webkit-filter: none !important ; filter: none !important ; }and yes – if you got a link on them – remove the overlay :
.gray-to-color .image-overlay { display: none !important; }
- You must be logged in to reply to this topic.