How to fade an image with CSS without opacity? - css

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;
}

Answer 1

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;
}