I've been working on overlaying text over an image using Jquery and css. The overlay text is displaying nicely on the image, but I'm struggling to change the font and size of the text. I attempted to make changes in the CSS for the font family and other properties, but nothing seems to be taking effect. Can someone please take a look at my code and provide some guidance?
Here's the relevant CSS:
#container {
width: 100px;
text-align: center;
margin: auto;
}
.back
{
position:absolute;
top:0;left:0;
}
.wrap
{
width:100px;
height:100px;
position:relative;
margin:auto;
overflow:hidden;
}
.comment
{
position:absolute;
width:100px;
top:100px;
left:0px;
letter-spacing: -1px;
color: white;
font-family:"Bookman Old Style", "Book Antiqua", Garamond;
font-size:100%;
background: #4A4D4A;
padding: 10px;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
line-height: 90%
}
JQuery:
<script type="text/javascript">
$(function () {
$('.wrap').hover(function () {
$(this).children('.comment').stop().css("top", "0px");
}
, function () {
$(this).children('.comment').stop().animate({ "top": '400px' }, 600);
});
});
</script>
HTML:
<div id="container">
<div class="wrap">
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ResizeToFit="100" RenderWrapTable="False"
ShowPlaceholder="true" ID="PictureUrlImage" runat="server" class="back" />
<span class="comment"><a href="http://www.google.com" id="A1" >Edit Picture </a>
</span>
</div>
</div>
Currently, the image looks like this:
However, I would like it to resemble Facebook's style.
Any advice from experts in the field would be greatly appreciated!
JSfiddle : jsfiddle.net/ItsMeSri/7mfj7/1