How to fade an image with CSS without opacity?

Question

Thanks for all the help, solution below.

I am new to web development, and I am trying to rebuild a website to practice my CSS.

The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website.

Thank you for the help!

Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path.

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.7;
      }

---Solution (at least how I did it - taken from http://jsbin.com/igahay/1/edit?html,output)-----

    <div class=picSet>
            <figure class="tint">
                <p id="#p1">Student in training</p>
                <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
                <img id=pic1  src="Media/pic1.jpg" />
            </figure>
    </div>

.tint {
    position: relative;
    float: left;
    margin: 3px;
    cursor: pointer;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
}
.tint:hover:before {
    content: "";
    background: rgba(96,150,179, 0.54);
    border: 5px solid #0B689A;
    border-radius: 20px;
    margin: 3px;  
}
.tint p{
    position:absolute;
    top:20px;
    left:20px;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 0.75em;
    display: none;
    color: #0B689A;
}
 .tint:hover > p{
    display: block;
}

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Feb 28 '16 at 15:27
But as hint...it's not an opacity...it's a transparent color overlay. If you search Stack Overlflow for text on image you'll find many many examples...including how to make the background **color** partially transparent. http://stackoverflow.com/questions/806000/how-to-give-text-or-an-image-a-transparent-background-using-css?rq=1 — Paulie_D, Feb 28 '16 at 15:30
Thank you that's all I was looking for. Had some trouble searching for the answer without knowing what it was actually called. — CZorio, Feb 28 '16 at 15:31
Please post the relevant code in this question, or in an online code editor such as [JSFiddle](https://jsfiddle.net/) or [JS Bin](https://jsbin.com/) to make collaborative debugging easy. This include the CSS, HTML and perhaps Javascript needed to recreate the picture fade question. — Kristoffer Bohmann, Feb 28 '16 at 15:34
A tip for you - Use Chrome developer tools, right click on the element and select "inspect element" - It will show you how it's done using CSS — Alon Eitan, Feb 28 '16 at 15:39
@user3582689 does *have* to use the `opacity` property, or are you okay with another approach? — Chris, Feb 28 '16 at 15:46
Any approach is fine. I just had trouble identifying what was actually happening. I'm inspecting the element like @AlonEitan suggested to learn that way. — CZorio, Feb 28 '16 at 15:47

score 14 · Accepted Answer · answered Feb 28 '16 at 15:37

You can't fade the opacity of an element, without having what's behind showing through.

The site you linked to isn't fading the opacity of the image, but introducing a translucent layer over the top with the text in.

If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there's no way to fade an image and not have what's behind show through.

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}

How to fade an image with CSS without opacity?

1 Answers1