image hover shows css info

HTML

<div class="imgteaser">
    <a href="#">
        <img src="http://static.howstuffworks.com/gif/vincent-van-gogh-paintings-from-saint-remy-2.jpg" alt="Daim Graffiti" />
        <span class="more">&raquo; Learn More</span>
        <span class="desc">
            <h3>Title</h3>
            Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
        </span>
    </a>
</div>

CSS

.imgteaser {
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgteaser a {
    text-decoration: none;
    float: left;
}
.imgteaser a:hover {
    cursor: pointer;
}
/*.imgteaser a img {
    float: left;
    margin: 0;
    border: none;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
}*/
.imgteaser a .more {
    position: absolute;
    /* positioning of the learn more text */
    right: 20px;
    bottom: 20px;
    font-size: 1em;/* size of the learn more text */
    color: #fff;
    background: #000;
    padding: 5px 10px;
    filter:alpha(opacity=65);
    opacity:.65;
}
.imgteaser a:hover .desc{
    display: block;
    font-size: 1em;/* size of the text inside the hover */
    background: #111;
    opacity:.75;
    color: #fff;
    position: absolute;
    /* positioning for the hover div. change to top for top align */
    bottom: 0px;
    left: 0px;
    padding: 10px;/* inside padding for the hover div */
    margin: 0;
    width: auto;/* will fill the whole image */
    border-top: 1px solid #999;
}
.imgteaser a:hover .desc h3 {
    display: block;
    margin-bottom: 5px;
    font-size:1.2em;
}
.imgteaser a .desc {    display: none; }
.imgteaser a:hover .more { visibility: hidden;}