Marked block

[SirPereira]

Hey guys,

I have a kind of menu, that I will use for display the last 3 videos, and I want that the block containing info about each video would be separated, and when someone hovers the mouse in it, it will show something like this:

 

This is my actual code for the column:

    <div class="column">
      <ul class="latestnews">
        <li><img src="images/demo/100x100.gif" alt="" />
          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque.</p>
        </li>
        <li><img src="images/demo/100x100.gif" alt="" />
          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque.</p>
        </li>
        <li class="last"><img src="images/demo/100x100.gif" alt="" />
          <p><strong><a href="#">Indonectetus facilis leo.</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque.</p>
        </li>
      </ul>
    </div>

 

This is the CSS for this:

/* ----------------------------------------------Column-------------------------------------*/

.column{
display:block;
float:right;
width:300px;
}

.column .holder, .column #featured{
display:block;
width:300px;
margin-bottom:20px;
}

.column .holder h2.title{
display:block;
width:100%;
height:65px;
margin:0;
padding:15px 0 0 0;
font-size:20px;
line-height:normal;
border-bottom:1px dotted #999999;
}

.column .holder h2.title img{
float:left;
margin:-15px 8px 0 0;
padding:5px;
border:1px solid #999999;
}

.column div.imgholder{
display:block;
width:290px;
margin:0 0 10px 0;
padding:4px;
border:1px solid #CCCCCC;
}

.column .holder p.readmore{
display:block;
width:100%;
font-weight:bold;
text-align:right;
line-height:normal;
}

/* Featured Block */

.column #featured ul, .column #featured h2, .column #featured p{
margin:0;
padding:0;
list-style:none;
color:#666666;
background-color:#F9F9F9;
}

.column #featured a{
color:#059BD8;
background-color:#F9F9F9;
}

.column #featured li{
display:block;
width:250px;
margin:0;
padding:20px 25px;
color:#666666;
background-color:#F9F9F9;
}

.column #featured li p.imgholder{
display:block;
width:240px;
height:90px;
margin:20px 0 15px 0;
padding:4px;
border:1px solid #CCCCCC;
}

.column #featured li h2{
margin:0;
padding:0 0 8px 0;
font-weight:normal;
font-family:Calibri, Arial, Helvetica, Verdana, "Vera Sans", sans-serif;
line-height:normal;
border-bottom:1px dotted #999999;
}

.column #featured p.readmore{
display:block;
width:100%;
margin-top:15px;
font-weight:bold;
text-align:right;
line-height:normal;
}

.column .latestnews{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.column .latestnews li{
display:block;
width:100%;
height:99px;
margin:0 0 11px 0;
padding:0 0 21px 0;
border-bottom:1px dotted #C7C5C8;
overflow:hidden;
}

.column .latestnews li.last{
margin-bottom:0;
}

.column .latestnews p{
display:inline;
}

.column .latestnews img{
float:left;
margin:0 10px 0 0;
padding:4px;
border:1px solid #C7C5C8;
clear:left;
}

 

Any ideias how to do it?

 

Regards