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

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


macus
Go to solution Solved by devonstank,

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 2

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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!

Sven

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