如何为我的此字幕添加背景效果？

Question

I am having a bit of a problem, I have to add caption to my image which has a transparent background of opacity say 0.65 and color black, I have added a caption which has no background effects yet, help needed ASAP. Thank You in advance. Here's my code

 <div class="img-wrap"> <div style="300 px; font-size:20px; text-align:center;background-color= "ff0066;">
<img src="/gadgets.jpg" alt="alternate text" width="220px" height="200px" style="padding-bottom:1.0em;">
<a href="#">Gadgets and Accessories</a>
</div>
<div class="img-info">
<h3><a href="#">Gadgets & Accessories</a></h3>
<a href="#">Tablets</a><br>
<a href="#">Headphones</a><br>
<a href="#">External Optical Drives</a><br>
<a href="#">Flexible Keyboards</a><br>
<h3><a href="#">More...</a></h3>
</div>
</div>

The classes img-wrap and img-info contain styling code for some transitions for mouse hover effect, do I need to create a separate class for the caption thing?

Answer 1

I think you're looking for something like this:

FIDDLE

Markup

<div class="img-wrap">
    <img src="http://placehold.it/220x200" alt="alternate text" width="220px" height="200px" />
    <a class="caption" href="#">Gadgets and Accessories</a>
</div>

CSS

.img-wrap
{
    position:relative;
    height: 200px;
    overflow:hidden;
}
.caption
{
    width:220px; 
    font-size:20px; 
    text-align:center;
    background-color: rgba(0,0,0,.7);
    position:absolute;
    left:0;
    bottom:-25px;
    color:#fff;
    visibility:hidden;
    transition: all, 0.3s ease 0.2s;
}

img
{
    width: 220px;
    height: 200px;
    display:inline-block;
}
img:hover + .caption
{
    visibility:visible;
    bottom: 2px;
    transition: all, 0.3s ease 0.2s;
}