如何创建图像悬停叠加淡入

Question

What I'm trying to do is create an image hover overlay fade in so when you hover over the image, the image is dark with a black opaque film on it with the words. When you move your mouse off of it, it's just an image. Right now, I just have four images with the words on top.

 <div id="about-nav" style="display:flex; flex-wrap:wrap; justify-content:center; margin-top: 130px; text-align:center; font-family:apple chancery; font-size:25px;"> <a href="#1a" style="display:block; width:400px; height:220px; background:#ddd url(http://i64.tinypic.com/orqzk7.jpg); background-size:cover; background-position: 1px 280px; line-height:220px; margin:10px; text-decoration:none; color:#C5E3ED; text-shadow:4px 1px 2px rgba(0,0,0,0.5);">About</a> <a href="#1b" style="display:block; width:400px; height:220px; background:#ddd url(http://i65.tinypic.com/2hyxonr.jpg); background-size:cover; background-position: -0.1px 260px; line-height:220px; margin:10px; text-decoration:none; color:#C5E3ED; text-shadow:4px 1px 2px rgba(0,0,0,0.5);">Personality</a> <a href="#1c" style="display:block; width:400px; height:220px; background:#ddd url(http://i64.tinypic.com/pnldu.jpg); background-size:cover; line-height:220px; margin:10px; text-decoration:none; color:#C5E3ED; text-shadow:4px 1px 2px rgba(0,0,0,0.5);">Appearence</a> <a href="#1d" style="display:block; width:400px; height:220px; background:#ddd url(http://i63.tinypic.com/2ilh8r7.jpg); background-size:cover; background-position: -0.1px 260px; line-height:220px; margin:10px; text-decoration:none; color:#C5E3ED; text-shadow:4px 1px 2px rgba(0,0,0,0.5);">History</a> </div> 

Answer 1

Perhaps you mean something like this? If I understood you correctly.

 figure { position: relative; } figure > img { width: 100%; } figure > figcaption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 50px; padding-top: 30%; opacity: 0; transition: 0.5s all; } figure:hover > figcaption { opacity: 1; } 

 <figure> <img src="https://www.nps.gov/cari/learn/nature/images/IMG_7245-Oak-Allee-Gate.jpg?maxwidth=650&autorotate=false" alt="Nature photo"> <figcaption>Nature photo</figcaption> </figure> 

Edit With links (to google as example)

 figure { position: relative; } figure > img { width: 100%; } figure > figcaption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 50px; padding-top: 30%; opacity: 0; transition: 0.5s all; } figure > figcaption > a { color: #fff; text-decoration: none; } figure:hover > figcaption { opacity: 1; } 

 <figure> <img src="https://www.nps.gov/cari/learn/nature/images/IMG_7245-Oak-Allee-Gate.jpg?maxwidth=650&autorotate=false" alt="Nature photo"> <figcaption> <a href="http://google.com">Nature photo</a> </figcaption> </figure>