Overlay Effect on Image

[OfficerHTML]

Can’t seem to have much luck trying to get this overlay effect on my image. I have pretty much copy and pasted from the overlay example from W3S website, but still doesn’t seem to work.

HTML:

<div class="my-wrapper">
        <img class="img-fluid" ID="preview" src="images/film.jpg" alt="film">
        </div>

CSS:

.img-fluid {
    border-bottom: 5px solid red; 
    border-left: 5px solid black; 
    border-right: 5px solid black; 
    border-top: 5px solid black;
}

/* Transition */

.img-fluid {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.my-wrapper:hover .img-fluid {
  opacity: 0.3;
}

[Shikkediel]

Please elaborate on “it doesn’t work” because the code seems to be fine in itself. Preferably add a working demo in Codepen as well.

[Author]

Posts