Light-box or enlarge image on hover/roll-over in Carousel Gallery

Site URL: https://mollyrees.com

Hi! 

Carousel doesn't have a lightbox option, and I've been searching endlessly for custom CSS to create this option. Is it possible?  I heard that it's an option in the Forte template, but haven't seen what that looks like. 

I have several Carousel galleries on a page and would like the viewer to click through larger images if possible.  Even if a lightbox weren't an option, I'd be happy if there were a hover or roll-over effect where hovering over a photo enlarged it temporarily.  Kind of like the "genie effect" option on a mac computer when you roll your mouse over the dock.  Any way really for the images to become larger if the viewer would like to look at them more carefully! 

Thanks in advance for any help.  My website is mollyrees.com, the page with the carousel galleries is "Editorial" which is a tab under "Photography". I have the page password set to: help!

Add to Home > Design > Custom CSS\

body#collection-5ef26ceebb9cd35432a748bd {
.sqs-gallery-design-strip img {
    transition: all 0.2s;
}
.sqs-gallery-design-strip img:hover {
    transform: scale(1.5);
}
}

On 6/30/2020 at 2:24 AM, tuanphan said:

Add to Home > Design > Custom CSS\

body#collection-5ef26ceebb9cd35432a748bd {
.sqs-gallery-design-strip img {
    transition: all 0.2s;
}
.sqs-gallery-design-strip img:hover {
    transform: scale(1.5);
}
}

 

Oh my gosh @tuanphan you are a genius!  I didn't think this was possible.  One question - is there a way to make the photos enlarge so that we can see the entire photo enlarge and not just see the enlarged part within the edges of the carousel gallery?  (If you are able to check my website you can see what it looks like with your code - I love that they are enlarged like this but the enlarged image is cropped to fit within the carousel instead of the enlarged image popping up big outside of the edges of the carousel strip).  I guess ideally if the photo were to pop out of the edges of the carousel then maybe only the middle photo would enlarge when rolled over.  Maybe that's not possible.  And do you think having them open in a traditional lightbox view isn't an option?  I guess it would be confusing - because right now when you click on an image it advances the carousel.  So how would the computer to know whether you wanted to advance the carousel or open a lightbox view of that image.  Hmm....  Thank you so much for your help!

UPDATE: I'm removing the code for now because I have to share the website with a client tomorrow and I think it's a little confusing that the images are only enlarged within the parameters of the carousel. But if there is any way to adjust the code so that they pop up without being cut off at the edges I would be endlessly grateful!

On 6/30/2020 at 1:24 AM, tuanphan said:

Add to Home > Design > Custom CSS\

body#collection-5ef26ceebb9cd35432a748bd {
.sqs-gallery-design-strip img {
    transition: all 0.2s;
}
.sqs-gallery-design-strip img:hover {
    transform: scale(1.5);
}
}

 

Hi! How do I add this code with my existing hover state on the homepage? I would like to have images enlarge on the child pages. I thought it would be an "on-click"? how can I add a code for a specific image?

On 7/1/2020 at 5:08 AM, jjaina said:

Oh my gosh @tuanphan you are a genius!  I didn't think this was possible.  One question - is there a way to make the photos enlarge so that we can see the entire photo enlarge and not just see the enlarged part within the edges of the carousel gallery?  (If you are able to check my website you can see what it looks like with your code - I love that they are enlarged like this but the enlarged image is cropped to fit within the carousel instead of the enlarged image popping up big outside of the edges of the carousel strip).  I guess ideally if the photo were to pop out of the edges of the carousel then maybe only the middle photo would enlarge when rolled over.  Maybe that's not possible.  And do you think having them open in a traditional lightbox view isn't an option?  I guess it would be confusing - because right now when you click on an image it advances the carousel.  So how would the computer to know whether you wanted to advance the carousel or open a lightbox view of that image.  Hmm....  Thank you so much for your help!

UPDATE: I'm removing the code for now because I have to share the website with a client tomorrow and I think it's a little confusing that the images are only enlarged within the parameters of the carousel. But if there is any way to adjust the code so that they pop up without being cut off at the edges I would be endlessly grateful!

 

Sorry for the delay. My laptop was broken a few days ago. Have you solved it yet?

On 7/4/2020 at 1:30 PM, phardy said:

Hi! How do I add this code with my existing hover state on the homepage? I would like to have images enlarge on the child pages. I thought it would be an "on-click"? how can I add a code for a specific image?

If you share link to your site, we can check easier.