Jump to content

Add a overlay hover effect that reveals blog title over image?

Recommended Posts

Site URL: https://nagy-design.squarespace.com

Hey Folks, I'm trying to get a couple of features to have the same hover effect:

  • Summary Block
  • Blog page articles

The hover effect:
Reveal the title of the blog and add a slightly transparent overly with the color #805c60, with a zoom effect, along with drop shadow and slight movement. (https://www.loom.com/share/763f4336ca624fd8b1e915200aec2718)

Right now I've got the home page with summary block almost working. I used a brightness filter, but that just adds a black transparency layer on hover, and I need it to be the color mentioned above. I've tried a few variations of code but just can't seem to get it.

On the blog page, I want the same effect. I tried to apply it, but don't see any blog titles at all. When I reveal excerpt, it shows below. I can't seem to get a hover effect with the title.


Here's the code I used for the home page section:

//ROUND Summary blocks
  .sqs-gallery-design-grid .margin-wrapper {transition: box-shadow .5s, transform .5s; 
  border-radius: 500px;
  overflow: hidden;
.sqs-gallery-design-grid .margin-wrapper:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.2);  
  transform: translateY(-10px);}
.sqs-gallery-block-grid {
  overflow: visible;}
// Grid Gallery Zoom //
@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(10%);
    filter: brightness(20%);
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 2  
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    color: #805c60!important;
    padding: 10px;
#block-4c5b6117782fd90b385e {

and the blog page: 

//rounded images
[data-section-id="62ba3b21816549635a744e9d"]{.blog-basic-grid a {
  border-radius: 500px!important;
 .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(10%);
    filter: brightness(20%);

//title overlay
.blog-basic-grid .blog-title {
  margin-top: -60px;


Screen Shot 2022-07-06 at 9.56.21 AM.png

Screen Shot 2022-07-06 at 10.35.21 AM.png

Edited by katiedunnit
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Thank you

Hover circle image >> show overlay + text?

Can you add some text & enable gallery caption first? I dont' see any text here


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.