How to reveal text on hover image in Squarespace

In this Squarespace tutorial, i'm going to teach you how to create a hover to reveal text effect in your squarespace website.
now this is specific for the latest version of squarespace known as fluid engine. if you're using an older version i already covered  this in a different tutorial using a poster image block. so if you're on classic editor or version 7 check the related videos to have fluid
engine and you'll find the tutorial that you need.

don't forget, you must install extention chrome squarespace id finder (check the link bellow). it's very important, because you can grab  block id with this extention. you can customize css code as you wish. so, check this video step bt step until the end.

Extention

Chrome: << Squarespace ID Finder >>

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

CSS Custom :

@media only screen and (min-width: 640px){
 #block-12345 {
  opacity: 0;
  transition: opacity 1s
 }

 #block-12345:hover {
  opacity: 1;
  transition: opacity 1s
 }
}