3 Column row with background image and text - Text always present, cant open images / video in lightbox
3 column row with single image - No cropped thumbnail, cannot link to video, no next / prev since they are separate images
Image gallery with 3 images - Cannot control the images from restacking on mobile, no overlay or text.
The closest I got as you can see was 3 Column row with background image and text. If there was a way to trigger a lightbox from an inner column I'd just about be there but I just seem to be falling short so with all the great help you guys give I thought I'd reach out to do what I would think really could be doable.
While this gets me close (you can see the modifications I made in the last setup titled 'IMAGE GALLERY WITH 3 IMAGES') unless I go fullwidth or constrained fullwidth (which for whatever reason will not center) a three column layout does not give me an option to eliminate the gap, unfortunately it does not appear I can trigger a video from this, I'm still not able to crop into the image like or get the 16:9 aspect ratio I'm wanting even after I have cropped and regenerated the thumbnail...and then there is the css I'd need to figure out for the image stacking.
Honestly, I'm thinking the best way to do accomplish this is to simply use a 3 COLUMN ROW WITH BACKGROUND IMAGES & TEXT which by using an extra class and column link will allow me to open a photo or video in a lightbox. While this does not allow for the next / prev function, this gives me the ability to use a custom thumbnail, the overlay and responsive adjustments I want and all the great features you've packed into the column / inner column.
The ONLY thing I'm missing is the ability to have the text appear / disappear along with the overlay on rollover. I thought I could do this simply with a button or CTA button, but I've learned the column link strips the functionality of the hover effects on button.
Is there anyway I can simply have the text appear / disappear when rolling over an inner column?
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):
Thank you kindly Tahir...works great. The ease out is a little rough on safari (seems to stall for a half sec then disappear) so if you knew of a quick solution to smooth that out certainly let me know...otherwise this is a perfect solution for this and because this is such an important aspect for the design of the site, I really appreciate you help / patience getting this sorted out.
Yeah, kinda weird. Here is a screen recording of what I see in Safari, it looks / functions great in Chrome, not sure which other browsers I would test it in since I'm not too concerned about any other thing but Safari or Chrome.
Hey guys...need help doing something that I thought would be easy, but after multiple attempts I just cant seem to make work.
At the bottom of the page I'm attempting to do a simple 3 column image grid where I want to the following:
See design sample below:
Yes, I know this might be a bit particular, but I feel like with all the capabilities of this theme it should be possible.
As you'll see I've attempted to do this multiple ways but each way there is one or more aspects I cant get right:
http://ericrussellphotography.com/staged/portfolio/kailo/
The closest I got as you can see was 3 Column row with background image and text. If there was a way to trigger a lightbox from an inner column I'd just about be there but I just seem to be falling short so with all the great help you guys give I thought I'd reach out to do what I would think really could be doable.
Thanks in advance.
Hey Again,
You can use the "Image Grid" Style in the Image Gallery and use Custom CSS to adjust the restacking order in mobile: https://themenectar.com/docs/salient/galleries/#imagegrid
Thanks.
ThemeNectar Support Team
Thanks Tahir,
While this gets me close (you can see the modifications I made in the last setup titled 'IMAGE GALLERY WITH 3 IMAGES') unless I go fullwidth or constrained fullwidth (which for whatever reason will not center) a three column layout does not give me an option to eliminate the gap, unfortunately it does not appear I can trigger a video from this, I'm still not able to crop into the image like or get the 16:9 aspect ratio I'm wanting even after I have cropped and regenerated the thumbnail...and then there is the css I'd need to figure out for the image stacking.
Honestly, I'm thinking the best way to do accomplish this is to simply use a 3 COLUMN ROW WITH BACKGROUND IMAGES & TEXT which by using an extra class and column link will allow me to open a photo or video in a lightbox. While this does not allow for the next / prev function, this gives me the ability to use a custom thumbnail, the overlay and responsive adjustments I want and all the great features you've packed into the column / inner column.
The ONLY thing I'm missing is the ability to have the text appear / disappear along with the overlay on rollover. I thought I could do this simply with a button or CTA button, but I've learned the column link strips the functionality of the hover effects on button.
Is there anyway I can simply have the text appear / disappear when rolling over an inner column?
Thanks for your help and patience on this guys!
Hey Again,
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):
.vc_col-sm-4.vc_col-xs-4.lightbox-column .wpb_text_column { opacity: 0; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; } .vc_col-sm-4.vc_col-xs-4.lightbox-column:hover .wpb_text_column { opacity: 1; }Thanks
ThemeNectar Support Team
Thank you kindly Tahir...works great. The ease out is a little rough on safari (seems to stall for a half sec then disappear) so if you knew of a quick solution to smooth that out certainly let me know...otherwise this is a perfect solution for this and because this is such an important aspect for the design of the site, I really appreciate you help / patience getting this sorted out.
That's Weird, are you able to recreate it other browsers ?.
Thanks
ThemeNectar Support Team
Yeah, kinda weird. Here is a screen recording of what I see in Safari, it looks / functions great in Chrome, not sure which other browsers I would test it in since I'm not too concerned about any other thing but Safari or Chrome.
https://www.dropbox.com/t/in7HWPf3kG9zgKOl
Try this revised CSS and check.
.vc_col-sm-4.vc_col-xs-4 .wpb_text_column { opacity: 0; -webkit-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; backface-visibility:hidden; transform:translateZ(0); } .vc_col-sm-4.vc_col-xs-4:hover .wpb_text_column { opacity: 1; }Thanks
ThemeNectar Support Team
Works perfect. Once again, thank you kindly for all your great assistance!