Jump to content

How to change the list to a paragraph in hover:background portfolio template

Go to solution Solved by tuanphan,

Recommended Posts

Hey Squarespacers!

I'm taking my chances that there's someone with more coding experience than me that can help me customize a Squarespace portfolio template. 

What I want to keep: 
A portfolio landing page section with a paragraph of text where some words are links leading to the full project. See my website at sofiawiklander.com or ref image 1

What I need help with:
I want unique full-bleed gifs or videos to appear whenever I hover over one of the links in the landing page paragraph. (See ref gif)


The simplest solution I can come up with is to create a "Portfolio page" with the layout Hover: background (see ref img 2) and customize the project links into a paragraph like the one on my current website, but I'm open to other ways too. 

 

current website landingpage paragraphj.png

Porfolio project.png

Full bleed img change when hovering link.gif

Edited by sosofofia
Made some clarifications
Link to comment
  • sosofofia changed the title to How to change the list to a paragraph in hover:background portfolio template

Tuanphan, 

I don't think the problem is changing links to a custom url, it's that the portfolio template does not allow me to customize the format of the "textbox."  Instead of the list, I want a paragraph where some words are linked (like on my current landing page).

Do you know what custom code I need to do that?

Link to comment
  • Solution
On 6/26/2023 at 4:58 AM, sosofofia said:

Tuanphan, 

I don't think the problem is changing links to a custom url, it's that the portfolio template does not allow me to customize the format of the "textbox."  Instead of the list, I want a paragraph where some words are linked (like on my current landing page).

Do you know what custom code I need to do that?

I wrote a quick guide here. You try following and let me know.

Require: Business Plan or higher

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

Is it possible to change the highlighted in red img tag to video? Or would I need to make big changes to display a background video instead of img?

 

/* seo - marketing */
.link3 .section-background img {
content: url(https://cdn.pixabay.com/photo/2023/06/01/13/07/annas-hummingbird-8033578_1280.jpg);
Edited by sosofofia
Link to comment
5 hours ago, sosofofia said:

Is it possible to change the highlighted in red img tag to video? Or would I need to make big changes to display a background video instead of img?

 

/* seo - marketing */
.link3 .section-background img {
content: url(https://cdn.pixabay.com/photo/2023/06/01/13/07/annas-hummingbird-8033578_1280.jpg);

You can consider using Gif image instead.

With video we will need to adjust more

I Haven't tried, but my ideal is

  • Add some video blocks behind the text
  • Hide all initial
  • When the Hover each text will display the video corresponding to the video. (But the video will not automatically play)

If you still need this, let me know, I will try testing code.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.