Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Help needed / Spacing and hover title effect.


Satori2046

Question

Site URL: https://octagon-garlic-ejcr.squarespace.com/

Link : https://octagon-garlic-ejcr.squarespace.com/

Password : sonatine

Hello friends, 

I'm almost done with my brand new website, but there are still a few things I would love to correct. 

1/ So for each section, all the thumbnails (an actuall image gallery) are linked to my video projects. Problem is, people need to actually go to the video page to see the actual title.  Is there a way I can make a hover effect on each thumnail pic so that when someone place the cursor on it, the title appears ? 

2/ There's a slight issue with the spacing between thumbnails on the "fashion film" page.

These are my main two issues before it's completed.  I added two captures describing the two issues.

Thanks a lot for your help, hopefully I can release my website pretty soon. 
 

Kinds regards

 

Capture 1.PNG

Capture.PNG

Link to post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 answers to this question

Recommended Posts

  • 1
3 minutes ago, Satori2046 said:

> Hello again and thank you so much for your time, I'm not sure what you need exactly, the images with the title written over it ?  Should I upload these pictures in the gallery ? Or should I list you the titles ? Let me know and sorry for the confusion. 

 

 

I checked page code and I don't see the title, caption, description there ...

To create hover effect with title, first the title must appear in the code.

I wonder when uploading images, ss has any box that allows to fill in the title, description..?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 1

1. Add to Page Settings > Advanced > Header

<style>
  .slide .margin-wrapper {
    position: relative;
}
  .image-slide-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    z-index: 999;
    opacity: 0;
    color: white;
}
  .slide:hover .image-slide-title {
    opacity: 1;
}
</style>

2. Remove my code and add this to Page Settings > Advanced > Header

<style>
  .sqs-gallery .margin-wrapper {
    margin-bottom: 0 !important;
}
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 1

There are two ways to do this

1. Add overlay background on hover

(It will take about 30 minutes. and it is outside the scope of free answer 😅)

2. Change image opacity with this code

<style>
  .slide a:hover img {
    opacity: 0.5 !important;
}
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
8 hours ago, tuanphan said:

Can you share link to page in screenshot? 

Hello there and thanks !

Of course, so for 1 /  the thumbnails and the hover effect I'd love to have that for each page and each picture thumbnails but squarespace doenst give me the option it seems :  

https://octagon-garlic-ejcr.squarespace.com/music-videos

https://octagon-garlic-ejcr.squarespace.com/fashion-films

https://octagon-garlic-ejcr.squarespace.com/commercials

 

And for 2/ the spacing issue it's : https://octagon-garlic-ejcr.squarespace.com/fashion-films


Thanks a lot !

Link to post
  • 0
19 hours ago, tuanphan said:

1. Before checking code for hover title. Can you add title or caption to images?

> Hello again and thank you so much for your time, I'm not sure what you need exactly, the images with the title written over it ?  Should I upload these pictures in the gallery ? Or should I list you the titles ? Let me know and sorry for the confusion. 

 

20 hours ago, tuanphan said:

 

2. Add to Home > Design > Custom CSS


.sqs-gallery .margin-wrapper {
    margin-bottom: 0 !important;
}

It worked perfectly ! Thank you so much !

 

Link to post
  • 0

Hello again !

So there is actually an option to put on the title but only below the thumbnail.

I added all the titles of the music video page : https://octagon-garlic-ejcr.squarespace.com/music-videos

will that help out ?

 

2/ The Css code for the spacing issue created a spacing  issue on the "Commercial Page" see picture below : 

https://octagon-garlic-ejcr.squarespace.com/commercials

 

Thank you !

Capture1.PNG

Link to post
  • 0

1 / It worked perfectly but the title are barely readable, is it possible to add a code to  change the transparency of the thumbnails so that the title appears clearly ? 

Like in this example at : 00:06

 


2/ Adding this code worked perfectly !


Thank you so much, I can see the end of the tunnel haha

 

Link to post
  • 0
1 minute ago, Satori2046 said:

Changing the opacity work great, but I only need to change the font style of the titles.  Is there a code I can add to this ?

Thanks a lot !

in above code,

.image-slide-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    z-index: 999;
    opacity: 0;
    color: white;
}

edit to

.image-slide-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    z-index: 999;
    opacity: 0;
    color: white;
	font-size: 100px;
	font-family: monospace;
	letter-spacing: 50px;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Regarding the hover issue,  I think I'm gonna quit for that, I cant find a good opacity to make it readable, the picture behind is just too colorfull and its a way too complicated process.


Thanks for your precious help though, I really appreciate it !

Edited by Satori2046
Link to post
  • 0
6 hours ago, Satori2046 said:

Regarding the hover issue,  I think I'm gonna quit for that, I cant find a good opacity to make it readable, the picture behind is just too colorfull and its a way too complicated process.


Thanks for your precious help though, I really appreciate it !

overlay background would be a good choice, try searching in forums, I think I have solved a lot of questions about this (not sure they will work for your site)

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...