How do I create a filter for a responsive HTML img?

Question

New to coding and not finding much help with research. I'm testing out a feature in isolation before applying it to a bigger project.

My goals:

• 3 responsive images
• An alt for the images (ie. no CSS image-background allowed)
• A border around the images
• A title and subtitle over the images
• A filter over the images (but not over the text)

I'm struggling to apply the filter to the images without sacrificing one of the other goals. An absolute position makes sizing the width and height of the filter difficult and relative positioning bumps the image out of the bordered box. What can I do to properly overlap the filter?

 * { box-sizing: border-box; margin: 0; padding: 0; } .flex-section { display: flex; } .flex-div { flex-basis: 30%; border: 8px solid black; background-color: rgba(255, 127, 80, 0.532); height: 40vh; margin: 4vh; z-index: 1; } .img-fit { width: 100%; height: 100%; object-fit: cover; z-index: 0; } .title { position: relative; display: inline-block; bottom: 15vh; padding: 0 2vh 0 2vh; color: wheat; background-color: rgb(0, 0, 0); z-index: 1; } .portfolio-tools { position: relative; display: inline-block; bottom: 10vh; right: 15vh; padding: 0 2vh 0 2vh; color: white; } /* The closest img filter attempt I've managed so far: .filter{ width: 100%; height: 100%; background-color: rgba(255, 127, 80, 0.397); } */

 <section class="flex-section"> <div class="flex-div"> <div class="filter"></div> <img class="img-fit" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/C9F6/production/_118720715_gettyimages-51246880.jpg" alt="I need to have an alt for this image, so I can't just make it a CSS background-image"> <h1 class="title">.title 1</h1> <p class="portfolio-tools">.portfolio-tools</p> </div> <div class="flex-div"> <div class="filter"></div> <img class="img-fit" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/C9F6/production/_118720715_gettyimages-51246880.jpg" alt="I need to have an alt for this image, so I can't just make it a CSS background-image"> <h1 class="title">.title 2</h1> <p class="portfolio-tools">.portfolio-tools</p> </div> <div class="flex-div"> <div class="filter"></div> <img class="img-fit" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/C9F6/production/_118720715_gettyimages-51246880.jpg" alt="I need to have an alt for this image, so I can't just make it a CSS background-image"> <h1 class="title">.title 3</h1> <p class="portfolio-tools">.portfolio-tools</p> </div> </section>

Answer 1

Your filter css property is not right, that's why it's not working. You can put the css in your code and hope it will work, if you want use background-color then you can use before after css, Hope it will help you :)

.img-fit:hover{
  filter: invert(100%);
  transition : .3s;
}

Demo of the different values of the filter property. https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_filter