Help needed / Spacing and hover title effect.

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

1, 2. Where is page in screenshots?

8 hours ago, tuanphan said:

1, 2. Where is page in screenshots?

Sorry what ? 🙂

22 hours ago, Satori2046 said:

Sorry what ? 🙂

Can you share link to page in screenshot? 

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 !

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

2. Add to Home > Design > Custom CSS

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

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 !

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..?

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 !

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>

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

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>

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 !

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;
}

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 !

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)