-
Posts
-
I’m wondering if there’s an option within the theme to have the images appear as black and white, then change to color on mouse over. Or if there’s a piece of CSS I could add to the site to enable a feature like that. Thanks, I love this theme, it’s easily the best I’ve worked with!
Hey evertypedesign,
Please refer to the following for an idea of the direction you would want to go with this:
https://kriesi.at/support/topic/image-hover-black-and-white-to-colour/
Best regards,
Jordan ShannonThank so much. I added the CSS to the Quick CSS after the code that was already in there after the demo import. It doesn’t seem to be working on this page, but let me know if I’ve done something wrong: http://bbf.4c0.myftpupload.com/executive-team/
Here’s what all the CSS looks like in the Quick CSS section:
/*hide auto sidebar from magazine*/
.page-id-2967 .sidebar .widget_nav_hide_child {
display: none;
}/*2.8 firefox problem*/
.avia-image-container-inner, .avia_image {
max-width: 100%;
}#socket .avia-bullet, #socket .avia-menu-fx {
display: none;
}/*hide auto sidebar from magazine*/
.page-id-2967 .sidebar .widget_nav_hide_child {
display: none;
}/*2.8 firefox problem*/
.avia-image-container-inner, .avia_image {
max-width: 100%;
}#socket .avia-bullet, #socket .avia-menu-fx {
display: none;
}…sorry, this is what the Quick CSS looks like:
/*hide auto sidebar from magazine*/
.page-id-2967 .sidebar .widget_nav_hide_child {
display: none;
}/*2.8 firefox problem*/
.avia-image-container-inner, .avia_image {
max-width: 100%;
}#socket .avia-bullet, #socket .avia-menu-fx {
display: none;
}div.avia-image-container div a img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}div.avia-image-container:hover div a img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}Hi,
You should be able to just reverse the values. Please provide admin info in the private area so we can help work this out.
Best regards,
Jordan ShannonHi,
Thanks for providing the admin access, I have removed this code:
div.avia-image-container div a img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%); } div.avia-image-container:hover div a img { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }and replaced it with this code:
#top .avia-image-container .avia_image { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 500ms; -moz-transition: all 500ms -o-transition: all 500ms; transition: all 500ms; } #top .avia-image-container .avia_image:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }Since you’re images looks black and white, I created a test page with the image of a bee that should look black and white and shows its right color when hovered over (link in private content). Let us know if you need further assistance :)
Best regards,
NikkoThanks so much! I was hoping to achieve the same affect with the color images on this page: http://bbf.4c0.myftpupload.com/executive-team/
I know it already has a different hover effect though, so is that even possible one this page?
Hi,
Yes, I have modified the css code to this :)
#top .avia-team-member img, #top .avia-image-container .avia_image { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 500ms; -moz-transition: all 500ms -o-transition: all 500ms; transition: all 500ms; } #top .flex_column:hover img, #top .avia-image-container .avia_image:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }Best regards,
NikkoHi,
Glad we could help :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
- You must be logged in to reply to this topic.