Efeito 4 slidings para imagens

(1)Copie todo o código:*** EFEITO 4 SLIDING
Original por cantinho-html.tumblr.com | Editado por cherry-liah.blogspot.com ***/
.qitem {
    width:140px; /*Largura da imagem*/
    height:140px; /*Altura da imagem*/
    border:4px solid #222; /*Borda da imagem*/
    margin:5px 5px 5px 0;
    background: #000; /*Cor de fundo quando passa o mouse*/ 
    overflow:hidden;
    position:relative;
    float:left;
    cursor:hand; cursor:pointer;
    font-family: arial; /*Fonte do texto*/
}

    .qitem img {
        border:0;
    
        /* allow javascript moves the img position*/
        position:absolute;
        z-index:200;
    }

    .qitem .caption {
        position:absolute;
        z-index:0; 
        color:#ccc; /*Cor da legenda*/
        display:block;
    }

        .qitem .caption h4 { /*Estilos do Título da legenda*/
            font-size:18px;
            padding: 10px;
            margin: 0px;
            color: #D40C0C;
            text-align: center
        }

        .qitem .caption p {
            font-size:11px; /*Tamanho da fonte do texto da legenda*/
            padding: 10px;
            margin:0;
            text-align: center;
        }

.bar1, .bar2, .bar3, .bar4 {
    position:absolute;
    background-repeat: no-repeat;
    z-index:200;
}

.clear {
    clear:both;
}

(2) º - Agora cole este código onde você quer que as imagens apareçam (em um gadget de html/javascript na sua sidebar, por exemplo). No final do código é onde você vai colocar o link e a legenda de cada imagem.

Está pronto! Até que é bem fácil não é? Se usarem, não esqueçam de creditar o Cherry BomB.
Esse efeito é quando  você passa o mouse e  a imagem sai e aparece o fundo,É UM EFEITO BONITO,MAS NÃO TENHO A DEMONSTRAÇÃO.