Jump to content

Opacity Gradient over Image Card Text

Recommended Posts

Site URL: https://www.moove.studio/

Hi all, 

I am trying to recreate the effect seen on the www.wonder.vision website where the text on the left next to the images on the right, is visible on in the middle. So when you scroll down, the text below is revealed, and the text going upwards is removed elegantly. Reference image below. 
image.thumb.png.4559eed7d51997e110d5d30a86eef568.png

Is this possible, and if so, how would I implement this for web display only? 

I'd also love for a hover-effect on the images that they slide a bit to the right when hovered over with the mouse, just like in the wonder.vision website. 
On that note - I noticed that it doesnt seem to be possible to have the images aligned to the actual right-side of the website. Is there a way to actually do this? 

 

Kind regards, 

Calvin

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 2/5/2022 at 6:16 PM, CalvinBacon said:

Site URL: https://www.moove.studio/

Hi all, 

I am trying to recreate the effect seen on the www.wonder.vision website where the text on the left next to the images on the right, is visible on in the middle. So when you scroll down, the text below is revealed, and the text going upwards is removed elegantly. Reference image below. 
image.thumb.png.4559eed7d51997e110d5d30a86eef568.png

Is this possible, and if so, how would I implement this for web display only? 

I'd also love for a hover-effect on the images that they slide a bit to the right when hovered over with the mouse, just like in the wonder.vision website. 
On that note - I noticed that it doesnt seem to be possible to have the images aligned to the actual right-side of the website. Is there a way to actually do this? 

 

Kind regards, 

Calvin

 

Can you share the direct link to this page?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.