Jump to content

How Can I add a hover + text + button over images?

Go to solution Solved by devonstank,

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Basically, I'm using a Code Block with custom HTML5 for the structure and CSS (LESS) for the styling.

However, you could still make this happen on an Image Block with the caption set to overlay on hover and just use CSS to override the default styles. So, if you add a link in the caption you could style to look like a button. Below could be a good starting point to override the styles and get things in place for styling with CSS.


.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;

 &:hover,
 &:focus {
   opacity: 1;
 }

 .image-caption {
   left: 50%;
   position: absolute;
   top: 50%;
   width: 100%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);

   em {
     // Project Type Styles //
   }

   strong {
     // Project Title Styles //
   }

   a {
     // Project Link Styles //
   }
 }
}

Hope this helps and points you in the right direction.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

Edited by Vexsoft
Link to comment
  • 10 months later...
  • 3 weeks later...

Hi Devon, Your website looks awesome! I am desperately trying to make my images appear as yours to under your latest projects section and am not having any success. When I copy/paste the above CSS code into a code block, it just appears on the page with all of that text showing. Any tips?

Link to comment

Hi mperenchio, you have to put the css code in 'Design' > 'Custom CSS'. It will affect all images of your site, so, if you prefer, you can affect just a single page by using the 'Page Header Code Injection' section for the particular page: go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' and paste this into the 'Page Header Code Injection'.

Link to comment

Thank you very much my friend i like this information good working.look is beauty image https://1.bp.blogspot.com/-8LYSTb_02Lw/VtegXB6PrGI/AAAAAAAABII/zb-3vJXF81c/s1600/jeuxnewbanat%2B%25282%2529.png

مرحبا بكم في موقع [العاب تلبيس بنات][1] فلاش ممتعة ومجانية يمكنكم اللعب بالمجان على هدا على موفع jeuxnewbanat [1]: http://jeuxnewbanat.blogspot.com

Link to comment
  • 6 months later...

There are many solutions out there (some good and some bad), but you might want to do some Googling to find them. Basically, you need to write some custom Less (CSS) to change the styling of Squarespace's Image Caption Overlay on Hover effect. Ultimately, overriding Squarespace's default styling.

Devon Stank @ Devonstank.com (Squarespace Tips & Tricks)

Edited by Vexsoft
Initial Revision
Link to comment
  • 1 month later...
  • 7 months later...
  • 3 months later...
  • 2 years 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.