Display Text Over Image Hover

Hello!! I am looking to add a hover state on top of these images where white text will overlay and darken the image below? Any help?

https://www.jefferyl.com/work

1 hour ago, Exileking said:

Hello!! I am looking to add a hover state on top of these images where white text will overlay and darken the image below? Any help?

Share your URL here so we can check and give right solution

Whoops my apologies! Here we go! And i added it above.

https://www.jefferyl.com/work 

@Exileking Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display white text with a dark overlay on the hover state of images. This code is intended to work only on the work page. If you want to apply the code to other pages, simply add the page collection ID followed by a comma in the first line of the code:

#collection-65443f8483de252080147860 {
  .sqs-block-image-link img {
    z-index: 10;
  }

  .sqs-block-image-link::before {
    content: "view project";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 12;
  }

  .sqs-block-image-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 11;
  }

  .sqs-block-image-link:hover::before,
  .sqs-block-image-link:hover::after {
    opacity: 1;
  }
}

Is it possible to mimic this text and look? Id like the image to fade and the white text be centered with the name of the project?

20 minutes ago, Exileking said:

Is it possible to mimic this text and look? Id like the image to fade and the white text be centered with the name of the project?

Try this code

#collection-65443f8483de252080147860 .sqs-block-image-link::before {
  content: "view project";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  z-index: 12;
  /*additional style*/
  font-family: pixChicago;
  width: 100%;
  font-size: 12px;
  text-align: center;
}

@Exileking With the current code, you have to update the code for each image to display the project name, resulting in hundreds of lines of code 🙂. You didn't mention displaying the project name, so I wrote the code as a general solution for all images.

If you add the project names as the alt text for each image (See screenshot), the project name can be displayed on hover with a custom script, and you won't have to update the code for each project with this approach.

@Lesum Im not sure what script you are referring to? I added the alt text to the first icon but I didnt see anything happen. Any suggestion?

@HoaLT Sorry mate that did not work?

1 hour ago, Exileking said:

@Lesum Im not sure what script you are referring to? I added the alt text to the first icon but I didnt see anything happen. Any suggestion?

I don't see any alt text in the first image on the work page. I haven't shared any script yet; I still need to write it 🙂

Ahhh got ya! I was confused for a second. I just went through and added alt text for all of those images.

@Exileking Here's the solution according to the requirements you mentioned last time. The code will only apply to an image if it has both alt text and a linked URL.

First add this code in Website > Pages > Website Tools > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $('.sqs-block-image-link').each(function() {
        var altText = $(this).find('img').attr('alt');
        var overlay = $('<div class="fluidImageOverlay"></div>').text(altText);
        $(this).append(overlay);
    });
});
</script>

Then add this code in Website > Pages > Website Tools > Custom CSS

#collection-65443f8483de252080147860 {
  .sqs-block-image-link img {
    transition: opacity 0.4s ease-in-out;
  }

  .sqs-block-image-link .fluidImageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'pixChicago' !important;
    font-size: 14px;
    text-transform: lowercase;
  }

  .sqs-block-image-link:hover .fluidImageOverlay {
    opacity: 1;
  }

  .sqs-block-image-link:hover img {
    opacity: 0.2;
  }
}

@Lesum By any chance is there a way to do this without code injection? I dont have the business plan that uses code injection?

Like @Lesum mentioned above, if you do not use the javascript code which is only available on business plan, there is only one way to do:

1. Setup a general css style for all image blocks with pseudo but not add the content:

.sqs-block-image-link::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  z-index: 12;
  font-family: pixChicago !important;
  width: 100%;
  font-size: 12px;
  text-align: center;
}

2. Then for each image block, use one css code block to provide it hover text

#block-0b32dd9e54cce7925857 .sqs-block-image-link::before {
  content: 'hover text for oarrange image';
}

#block-8a26635bc7b309d521c2 .sqs-block-image-link::before {
  content: 'hover text for the boy image';
}

...

Use the following extension to get block id: Squarespace finder ID

It means that the more blocks you have, the more css code you need to implement

@HoaLT

I added in the above code and the code below it but I still dont see any hover states?

 

@Exileking As I mentioned in my previous comment, without injecting the code in Code Injection, you will need to update the code for each image. First, add this block of code in Website > Pages > Website Tools > Custom CSS. This block of code applies to all images.

#collection-65443f8483de252080147860 {
.sqs-block-image-link img {
    transition: opacity 0.4s ease-in-out;
}

.sqs-block-image-link::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'pixChicago' !important;
    font-size: 14px;
    text-transform: lowercase;
}

.sqs-block-image-link:hover img {
    opacity: 0.2;
}

.sqs-block-image-link:hover::before {
    opacity: 1;
}
}

Then for the first project titled "tropicana", you can add this code in Custom CSS

#block-0b32dd9e54cce7925857 .sqs-block-image-link::before {
    content: "tropicana";
}

For the second image, 

#block-8a26635bc7b309d521c2 .sqs-block-image-link::before {
    content: "123 darkside";
}

As you can see, for the rest of the projects, you just need to copy and paste the code block right above, change the block ID, and add the project name inside the content in the code.

You can use this tool to find the block ID of the images: Squarespace ID Finder

Hope that helps.