How to display an image using CSS without transparency?

Question

Thanks for the help below.

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

Website for questions http://www.divecarib.com . If you scroll down to the images on this home page, you will notice that they “disappear” when you hover. How can I achieve this? Using opacity makes the background image pass, which is not the way it is implemented on this website.

Thanks for the help!

Below is my attempt at damping ... did not include the code in the original message, because I thought it didn’t matter, given that I was wrong.

.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 cannot fade the opacity of an element without having to scroll.

The site you contacted does not fade with the opacity of the image, but it is a translucent layer on top of the text with text.

If you just want to fade the image but can't skip the background image, you can put a wrapper around the image with full background color. But there is no way to fade out the image and not have what kind of show.

 .container { background:#FFF; } .container img:hover { opacity:0.8; }