I am using two different settings for team members. BIO Full screen Modal and Meta Overlaid. Part o f the staff do not have full bios is the reason. I would like them to work the same way though on hover as currently they seem to operate opposite each other. How can I make them both match?
One other item, is to have the boxes the same aspect as each other and the titles aligned the same. Basically I would like the bio_full and the meta overlaid to match up. I am trying some things now so I might have it close by the time you reply.
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):
Also, they are not all square. The bottom ones are but the top section is not. Could the bottom be made to match the not square top section? I just want them all to match and I like the top section best.
Unfortunately the image sizes cant be changed with css alone . Also remove this custom css: http://prntscr.com/jx6uni
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):
I am using two different settings for team members. BIO Full screen Modal and Meta Overlaid. Part o f the staff do not have full bios is the reason. I would like them to work the same way though on hover as currently they seem to operate opposite each other. How can I make them both match?
If possible to either have the arrow on all or none as well so all of these look consistent.
One other item, is to have the boxes the same aspect as each other and the titles aligned the same. Basically I would like the bio_full and the meta overlaid to match up. I am trying some things now so I might have it close by the time you reply.
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):
.team-member[data-style="bio_fullscreen"]:hover .team-member-overlay { display: none !important; } .team-member[data-style="bio_fullscreen"] .team-meta { text-align: center !important; } body .team-member[data-style="bio_fullscreen"] .team-meta .arrow-end,body .team-member[data-style="bio_fullscreen"] .team-meta .arrow-line { display: none !important; }Thanks
ThemeNectar Support Team
How do I make them all dim when I hover?
Also, they are not all square. The bottom ones are but the top section is not. Could the bottom be made to match the not square top section? I just want them all to match and I like the top section best.
Hey Again,
Unfortunately the image sizes cant be changed with css alone . Also remove this custom css: http://prntscr.com/jx6uni
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):
.team-member:hover .team-member-overlay { opacity: 0.4 !important; } .team-member .team-member-overlay { transition: opacity .8s cubic-bezier(.2,1,.2,1); -webkit-transition: opacity .8s cubic-bezier(.2,1,.2,1); backface-visibility: hidden; transform: translateZ(0); opacity: 0 !important; }Thanks
ThemeNectar Support Team
That worked for the top section, but not for the bottom section as they are two different type of staff boxes.
What else do I need to do to match up the box size?
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):
.full-width-content .vc_span4 .team-member[data-style="meta_overlaid"] .team-member-image, .full-width-content .vc_col-sm-4 .team-member[data-style="meta_overlaid"] .team-member-image, .full-width-content .vc_span4 .team-member[data-style="meta_overlaid_alt"] .team-member-image, .full-width-content .vc_col-sm-4 .team-member[data-style="meta_overlaid_alt"] .team-member-image { height: 500px !important; }Thanks
ThemeNectar Support Team
That worked. The only thing left is that the bottom boxes are not dimming on hover like the top ones do.
Hey Again,
You need to remove this for it to work : http://prntscr.com/jy2u5p .
Best
ThemeNectar Support Team
Awesome! Thank you.