How can I add background effects to this Caption of mine? - html

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;">
Gadgets and Accessories
</div>
<div class="img-info">
<h3>Gadgets & Accessories</h3>
Tablets<br>
Headphones<br>
External Optical Drives<br>
Flexible Keyboards<br>
<h3>More...</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;
}