CSS in news section

[FaLLBacK]

XippY
CSS in news section, can it be done ?

found the code here: http://www.cssplay.co.uk/index

http://www.cssplay.co.uk/opacity/image_linktext.html

<link rel="stylesheet" media="all" type="text/css" href="../css/default.css" />

<style type="text/css">
.extra {display:inline; float:left; text-decoration:none; margin:0 10px; display:inline;}
.extra em {font-style:normal;}
.extra em.txt, .extra b {display:none;}
.extra .head {display:block; width:160px; height:55px;}
.extra .color1 {background:#242424;}
.extra .color2 {background:#242424;}
.extra .color3 {background:#242424;}


.extra img {border:0; display:block;}
.extra em.mh2 {padding-left:5px; margin:0; color:#000; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:24px;}
.extra em.mh3 {padding-left:5px; margin:0; color:#fff; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:16px;}

.extra:hover {background:#fff; position:relative;cursor:pointer; text-decoration:none;}
.extra:hover b {display:block; position:absolute; top:55px; left:0; width:160px; background:#ccc; height:60px; opacity:0.7;}
.extra:hover .color1 b {background:#00FF00;}
.extra:hover .color2 b {background:#00FF00;}
.extra:hover .color3 b {background:#00FF00;}

.extra:hover em.txt {display:block; position:absolute; top:60px; width:160px; left:5px; height:50px; color:#000; margin:0; line-height:1.5em;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
.extra:hover b {filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
</style>
<![endif]-->

<div id="info">


<a class="extra"
<em class="head color1">
<em class="mh2">test #1</em><br />
<em class="mh3">test 1.2</em>
<b></b> <!-- for opaque background -->
<em class="txt">hope we can</em>
</em>
<img src="http://i720.photobucket.com/albums/ww202/hick0matic/Decorated%20images/Vehicles-Other-35336-1.jpg" alt="test 1.3" title="" />
</a>

<a class="extra"
<em class="head color2">
<em class="mh2">test #2</em><br />
<em class="mh3">test 2.2</em>
<b></b>
<em class="txt">use this in</em>
</em>
<img src="http://i720.photobucket.com/albums/ww202/hick0matic/Decorated%20images/Vehicles-Other-35336-1.jpg" alt="test 2.3" title="" />
</a>

<a class="extra"
<em class="head color3">
<em class="mh2">test #3</em><br />

<em class="mh3">test 3.2</em>
<b></b>
<em class="txt">the news section</em>
</em>
<img src="http://i720.photobucket.com/albums/ww202/hick0matic/Decorated%20images/Vehicles-Other-35336-1.jpg" alt="test 3.3" title="" />
</a>

<br class="clear" /><br />
</div> <!-- end of info -->