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

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

Question

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!

Edited by macus

Share this post


Link to post

9 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

Share this post


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?

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
  • 0

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


Just learning new things.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...