hover clickable image description not working

Question

I have a clickable image when on hover I would like to display a short description about it. I have a tried a method using CSS and jQuery but it seems like it glitters when I hover instead of remaining on a steady state(static).

HTML

<a href="#" class="project">
    <img src="images/valencia.png"/>
</a>
<a href="#" class="description">
    <p>In this website you find information about sport and gastronomy in Valencia. It was built for the Erasmus+ Project.</p>
</a>

CSS

a.project img {
    height: 150px;
    width: 200px;
    border-radius: 5px;
    border: 1px solid #fff;
}
a.description {
    text-decoration: none;
}
a.description {
    height: 150px;
    width: 200px;
    background-color: white;
    color: black;
    border-radius: 5px;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 90px;
    right: 0;
    bottom: 0;
    visibility: hidden;
}
a.description p {
    margin-top: 35px;
}

jQuery

$('a.project img').mouseover(function(){
    $('a.description').css("visibility","visible");
});
$('a.project img').mouseout(function(){
    $('a.description').css("visibility","hidden");
});

Answer 1

I would try .hover instead:

$('a.project img').hover(function(){
    $('a.description').css("visibility","visible");
});

Rather than testing for .mouseover and .mouseout .

Answer 2

This is an example that might help you solve the problem.

https://stackoverflow.com/a/16971934/3585278

It's good to remember that if you're handling how things look, chances are it should be done in CSS (which will make your life easier in the long run).

I've mocked up an example here: http://jsfiddle.net/HAcE2/

You basically need to create a box that appears when you hover. By using position:absolute you can get the box to appear over the top and using CSS we can get it to appear when we hover over.

.wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.8);
    width: 100px;
    height: 100px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}
}

img {
    z-index:1;
}