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

I'm using the Bedford template and I'm trying to add text and a button that can be viewed when you hover over the images. He there is an example:

http://www.devonstank.com/ -> My latest proyects

Thanks!

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)

Thanks so much!! Finally I abandoned the idea, but now I need it again for a new proyect. It works great!

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?

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

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

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)

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

When you Add an image, click the Design tab, select Poster, scroll down and select Button in the "Image link" drop down.

Thanks for this, I selected poster and was able to create a button, thing is.. how do I place it ? or move it around?

Hi @devonstank your site looks awesome. 

Wondering if you'd be willing to share the code you used for video with text over it?

I'm trying to achieve basically the same thing you did (but on Avenue theme).

Basically like this but with the text over the video and also so the video crops to a vertical on mobile: 
https://alexfreund.com/test-landing