So I have 2 design related questions on home page of website
1) How do I resize the fancy box? In my website, it forces images to conform to a square size. I would like the fancy box to respond to the unique sizes of each image.
2) I was able to look through ticksy and found some code to style the fancy box using the following code
1: I am afraid thats not possible with the current Theme Options .
2: Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
So I have 2 design related questions on home page of website
1) How do I resize the fancy box? In my website, it forces images to conform to a square size. I would like the fancy box to respond to the unique sizes of each image.
2) I was able to look through ticksy and found some code to style the fancy box using the following code
.nectar-fancy-box[data-style="parallax_hover"] .bg-img:after{
background-color: rgb(5,54,151); opacity:0.9; !important;
}
Is there anyway to have the same effect (color and reveal on hover) but without the parallax?
Hey Again,
1: I am afraid thats not possible with the current Theme Options .
2: Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
html.cssreflections .nectar-fancy-box[data-style="parallax_hover"] .parallaxImg-container.over { transform: perspective(2910px) rotateX(0deg) rotateY(0deg) translateZ(0px) !important; }Thanks
ThemeNectar Support Team
1. Is there anyway to achieve that effect within the theme?
2. Thanks. It looks to be working good. Additionally is it possible remove the added depth on hover?
Hey Again,
1: Not aware of any such solution.
2: There is no scale or depth on the image on hover : http://prntscr.com/icc402 . Could you elaborate what exactly you are referring to ? .
B.est
ThemeNectar Support Team
1. Ok thanks.
2. So when u hover I can see some shadow next to image. Regular image (https://ibb.co/mT456H) and on hover (https://ibb.co/f5apYx).
I circled where I can see the shadow.
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box[data-style="parallax_hover"]:hover .parallaxImg-shadow { display: none !important; }Thanks
ThemeNectar Support Team