overlay text over image cant get it to work in wp but works perfect in dreamweav

overlay text over image cant get it to work in wp but works perfect in dreamweaver i add the code in the text area in html and add css in css section but i keep getting a grey box at bottom thats not ment to be there why it doing that please help the image im using are just sample image while i try and get pages layed out correct
here my code
<!–image hover animation effect–>
<div class=”wrapper”>

<div class=”wrapper” style=”text-align: center;”>

<div class=”content”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<div class=”wrapper” style=”text-align: center;”>

<div class=”content”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<div class=”wrapper” style=”text-align: center;”>

<div class=”content”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<p style=”text-align: center;”>” alt=”” scr=”image1.jpg” /></p>

<div class=”content” style=”text-align: center;”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<div class=”wrapper” style=”text-align: center;”>

<div class=”content”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<div class=”wrapper” style=”text-align: center;”>

<div class=”content”>
<div class=”text_area”>Animation Effect</div>
</div>
</div>
<div class=”wrapper”>
<p style=”text-align: center;”></p>

<div class=”content”>
<div class=”text_area” style=”text-align: center;”>Animation Effect</div>
</div>
</div>
<div class=”wrapper”>
<p style=”text-align: center;”></p>

<div class=”content”>
<div class=”text_area” style=”text-align: center;”>Animation Effect</div>
</div>
</div>
<div class=”wrapper”>
<p style=”text-align: center;”></p>

<div class=”content”>
<div class=”text_area” style=”text-align: center;”>Animation Effect</div>
</div>
</div>

here my css code please addvise what wrong
#pre-footer-area:after { display: none }
body{width::960px;margin:150px auto;}

.wrapper{width:280px;height:280px;float:left;margin-right:20px;box-shadow: 0px 0xp 25px black;border:10px solid#fff;overflow:hidden;}
.wrapper img{width:100%;height:100%;}

.content{width:280px;height:280px;background:#000;opacity:0.6;transition: transform 300ms;position:relative;}

.wrapper:hover .content{transform: translateY(-285px)}

.text_area{color:#fff;width:100%;height:40px;background:#00300a;text-align:center;padding-top:10px;position:absolute; margin-top:200px;font-family:helvetica;font-size:16px;font-weight:bold;cursor:pointer;display:none;}

.wrapper:hover .text_area{display:block;}

.wrapper:hover img{transform: scale(1,1) rotate(360deg)}