CSS for Reveal module

new_gist_file.css

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

Does this code no longer apply? I am using Canopy theme and the only style sheet is styles.scss.liquid. I have added all of the code mentioned very carefully, and nothing happening. I turned off the "Quick Buy" option in Canopy theme thinking maybe it was conflicting as it puts a little banner on top of the main image, but still no go.

Hi Krittleb , Did you ever manage to resolve the issue??? Trying to do this on my canopy.

Nope, I somehow got around this issue.

…

On Mon, Sep 9, 2019, 6:08 PM legrosbail ***@***.***> wrote: Does this code no longer apply? I am using Canopy theme and the only style sheet is styles.scss.liquid. I have added all of the code mentioned very carefully, and nothing happening. I turned off the "Quick Buy" option in Canopy theme thinking maybe it was conflicting as it puts a little banner on top of the main image, but still no go. Hi Krittleb , Did you ever manage to resolve the issue??? Trying to do this on my canopy. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/63fd3c4327a466174aa8?email_source=notifications&email_token=AD7ZGAZ6PDXJ2CYBQBWTXVTQIZYJHA5CNFSM4HPET4AKYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFYMJ2#gistcomment-3020957>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD7ZGAYIFHQVPG53VELGLMTQIZYJHANCNFSM4HPET4AA> .

The original code is not working. This YT video works for debut theme on 2019.
https://www.youtube.com/watch?v=9uxSrOxxZpY

Hi, thanks for sharing your nice code. I was wondering if anyone has experience any problems with the hovering effect on safari. In a preview of my page, the hovering does not occur on Safari but on all other browsers. Why could this be?