One challenge I am facing is creating a clickable image with text at the bottom and a semi-transparent background behind it, which is a common design element on many websites. I have everything working except for a small portion of the image showing below the text background, coming from the li containing the image and anchor. Despite my efforts to remove it using various online resources, I have not been successful.
Does anyone know how to make the background color of the text neatly fit to the bottom of the image?
<ul id='main-aside-buddhaImgs'>
<li>
<div class='titleCont'>
<a href='#'><img src='images/squarebuddha.jpg' alt='budda' height='120' width='120'/>
<span>title</span>
</a>
</div>
</li>
ul#main-aside-buddhaImgs {
float:left;
}
ul#main-aside-buddhaImgs li {
float:left;
padding:12px 15px;
}
ul#main-aside-buddhaImgs li div.titleCont {
position:relative;
}
ul#main-aside-buddhaImgs li a {
display:block;
}
ul#main-aside-buddhaImgs li a span{
display:block;
position: absolute;
bottom: 0;
left:0;
width:100%;
color:#fc6;
text-align: center;
line-height: 30px;
background: #300;
background: rgba(51,0,0,.5);
}