将鼠标悬停在图像上以使其透明并显示文本

Question

Hey I'm working on a portfolio page (just using HTML and CSS) and I created a grid of images. My plan is that the one image that is hovered over gets transparent (0.2 transparency or so) and a description text appears at this field.

I created following code, but this makes my description text transparent as well. How can I get the text to stay fully visible?

HTML:

<div id="imagelist">
    <a href="">
        <img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
        <p class="imgtext">This is the description text.
        </p>
    </a>
</div>

Can you help me with the CSS part?

Answer 1

When the div is in a hover state target the Image element to change opacity and change the display property for the description.

 #imagelist:hover img { opacity: .2; } #imagelist:hover .imgtext { display: block; } .imgtext {display: none;} 

 <div id="imagelist"> <a href=""> <img src="img/img1.jpg" width="200px" height="200px" alt="Image 1"/> <p class="imgtext">This is the description text. </p> </a> </div> 

Answer 2

Do you mean the text should appear behind the transparent picture? Also, are all thumbnails 200px by 200px?

If yes, you could do it like this:

 #imagelist a { width: 200px; height: 200px; position: relative; display: block; } #imagelist img { position: absolute; left: 0; top: 0; bottom: 100%; height: 100%; z-index: 1; } #imagelist img:hover { opacity: 0.2; } 

 <div id="imagelist"> <a href=""> <img src="http://s0.geograph.org.uk/geophotos/03/97/06/3970600_94c29e78.jpg" /> <p class="imgtext">This is the description text. </p> </a> </div> 

Answer 3

I just worked on it

Made some changes try it out

<style>
            #imagelist a {position: relative;display: inline-block;}
            #imagelist a p{display: none;}
            #imagelist a:hover p{position: absolute;width: 100%;height: 100%;background: #000;opacity: 0.8;top: 0;left: 0;margin: 0;display: block;}
            #imagelist a p span{display: inline-table;width: 100%;height: 100%;text-align: center;color:#fff;}
            #imagelist a p span span{display: table-cell;vertical-align: middle;}
        </style>


<div id="imagelist">
            <a href="">
                <img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
                <p class="imgtext">
                <span>
                    <span>This is the description text.</span>
                </span>
                </p>
            </a>
        </div>

It looks quite simple just added some few extra tags with it. Try it out and let me know the feedback