Jump to content

Help needed / Spacing and hover title effect.

Recommended Posts

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 comment
  • Replies 15
  • Created
  • Last Reply
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 comment
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 comment
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..?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 comment

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.