Mouseover Div Issue

I know it’s a little bit easy question to ask but I couldn’t figure it out for 1 week; I have a website that is here, and in portfolio section there’s a code which changes image to description when mouse is over…

And I want to make it inverted, the description div has to be first I see on that section and when I move the cursor on it I want the image will be shown.

I couldn’t figure it out, which div makes that and how to change it to achieve that.

<a target="_blank" rel="nofollow" href="img/plato.jpg" class="work-6-item image-link-2">
                       <img src="img/plato.jpg" class="img-responsive" alt="web tasarım uygulaması" />
                       <div class="work-6-overlay">
                          <div class="work-6-overlay-item">
                             <div class="work-6-des">
                                <span class="work-6-top-tit">PLATO FİLM</span>
                                <span class="work-6-line"></span>
                                <span class="work-6-sub-tit">Web Sitesi / İçerik Yönetimi</span>

What I did is only reversing hover and normal state
Add that at the end of style.css

.work-6-overlay {
    opacity: 1;
.work-6-overlay:hover {
    opacity: 0;
.work-6-top-tit,.work-6-sub-tit, .work-6-line {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
.work-6-overlay:hover .work-6-top-tit, .work-6-overlay:hover .work-6-sub-tit, .work-6-overlay:hover .work-6-line {
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);

Without seeing the actual code it’s difficult to be sure, but it looks like what you want is to simply re-order the li elements inside each div.