MakinggImageO

OverlayCaptionUsingCSSS
Inthistu
utorialwewillmakeaniccetranspareentoverlayim
magecaption
nusingCSS.
Intro
onrelatedtu
utorialsimad
deMakingimagecaptio
onsusing
Therearre2imageovverlaycaptio
jQueryandMakinggACoolThumbnailEffecctWithZoom
mAndSlidinggCaptions.Feelfreetoccheckthem
out,theyregreat

Bothoftthemhavessomecoolefffectmadew
withjQuery,b
butyesterdayyareader(h
hiGoodluck)askedme
howtoh
havethecap
ptionsshown
nbydefaultw
withoutjQueeryeffects.SSoirealizediidonthaveatutorial
explainin
nghowtom
makeasimpleeoverlayimaagecaptionaandhereweeare.Enjoy.
Howitlooks

HTML
L
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<!
!wrapperd
div>
<d
divclass='wr
rapper'>
<!image
e>
<imgsrc='wolf.jpg'/>
>
<!descr
riptiondiv>
<divclass
s='descriptio
on'>
<!d
descriptioncontent>
<pcla
ass='description_content'>Thepack,th
hebasic...</
/p>
<!e
enddescriptioncontent>
</div>
<!endd
descriptiondiv>
</
/div>
<!
!endwrapp
perdiv>

CSS
1.
2.

di
iv.wrapper{
float:left
t;/*important*/

3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

position:relative;/*important(sowecanabsolutelypositionthedescriptiondiv*/
}
div.description{
position:absolute;/*absoluteposition(sowecanpositionitwherewewant)*/
bottombottom:0px;/*positionwillbeonbottom*/
left:0px;
width:100%;
/*stylingbellow*/
backgroundcolor:black;
fontfamily:'tahoma';
fontsize:15px;
color:white;
opacity:0.6;/*transparency*/
filter:alpha(opacity=60);/*IEtransparency*/
}
p.description_content{
padding:10px;
margin:0px;
}

Thats it
Andwehaveanicetransparentoverlayimagecaption.Ifyoudontlikethatthetextisalsotransparent
thenicansuggestyoutouseatransparentPNGimage1pxwideand1pxtallasthebackgroundof
the.descriptionandremovetheCSSopacity,oryoucanusejavascripttomakeatransparentmaskand
ontopofitshowthecaptiontext.Ifyouliketoseeatutorialondifferentwaystoachievethat,letme
knowandillseewhaticando