Jump to content

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

Recommended Posts

  • Replies 10
  • Views 26.1k
  • Created
  • Last Reply

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;

 &: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)

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...
  • 1 month later...

Thank you for the code! I´m using this on my Marquee-Template. But there is one problem, the text is very small and I couldn´t figure out how to change the size. Do you now how to change the text-size? Thanks!


Link to comment
  • 7 months later...
  • 3 months later...
  • 2 years later...


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.