I am hoping to learn how to change some of the styling of my "Image Gallery" using the "Image Grid Style"
I want to have the ability to create a simple image grid with 3 columns for showcasing photos. The "Image Grid Style" works well for this but it has a few quirks that I cannot find a way around. I am currently using the "Meta overlaid with zoom effect on hover" style.
1.) I was able to remove the color overlay with a bit of CSS I found in a different thread. So this is solved.
2.) I was able to center the images within each column by changing the text-align to center from the backend editor. (This would be helpful to have within the class mode editor).
3.) I would like to remove the zoom on hover feature from the gallery. Not sure how to do this. I cannot find the right CSS that would enable this.
4.) I would like to add a grayscale effect to the whole gallery so the images are black and white and then add a hover effect that adds color to them. (This one is less essential but would be great to have / understand how to do).
It would be nice if there was an option for the "Gallery Style" to have a "None" option that left the grid without any hover features.
This is my first time submitting a ticket and I appreciate any feedback on how to gather more information.
I also appreciate all the help I have already found under other tickets. This is a great theme. Wonderfully designed and simple to use.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I am hoping to learn how to change some of the styling of my "Image Gallery" using the "Image Grid Style"
I want to have the ability to create a simple image grid with 3 columns for showcasing photos. The "Image Grid Style" works well for this but it has a few quirks that I cannot find a way around. I am currently using the "Meta overlaid with zoom effect on hover" style.
1.) I was able to remove the color overlay with a bit of CSS I found in a different thread. So this is solved.
2.) I was able to center the images within each column by changing the text-align to center from the backend editor. (This would be helpful to have within the class mode editor).
3.) I would like to remove the zoom on hover feature from the gallery. Not sure how to do this. I cannot find the right CSS that would enable this.
4.) I would like to add a grayscale effect to the whole gallery so the images are black and white and then add a hover effect that adds color to them. (This one is less essential but would be great to have / understand how to do).
It would be nice if there was an option for the "Gallery Style" to have a "None" option that left the grid without any hover features.
This is my first time submitting a ticket and I appreciate any feedback on how to gather more information.
I also appreciate all the help I have already found under other tickets. This is a great theme. Wonderfully designed and simple to use.
Hey dylanbehr ,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.portfolio-items .col .work-item.style-3:hover img { -webkit-transform: scale(1) !important; transform: scale(1) !important; filter: none !important; } .portfolio-items .col .work-item.style-3 img { filter: grayscale(1); -ms-transition: all 0.38s cubic-bezier(0.05, 0.2, 0.1, 1) 0s; -webkit-transition: all 0.38s cubic-bezier(0.05, 0.2, 0.1, 1) 0s; transition: all 0.38s cubic-bezier(0.05, 0.2, 0.1, 1) 0s; }Thanks
ThemeNectar Support Team
Amazing. Works wonderfully.
Thank you for such a fast response. It is truly appreciated.