Nakładanie na siebie elementów - hover

[Gość Kamillo]

Witam,

Znalazłem na pewnej stronie różne efekty wraz z kodami, jeden z nich wkleiłem na stronę, aby sprawdzić jak działa. I coś jest nie tak.
Tutaj jest kod razem z rezultatem: http://jsfiddle.net/802nvurr/
Natomiast prawidłowo powinno wyświetlać się tak: http://tympanus.net/Tutorials/OriginalHoverEffects/index4.html
Czego to co wyświetla się w edytorze jest źle? Na stronie WWW po dodaniu też źle się wyświetla, tylko w demo jest dobrze.

[Misiek08 285]

 

.view-fourth .mask {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-radius: 0 !important;
    opacity: 0 !important;
    transform: scale(0) rotate(-180deg) !important;
    transition: all 0.4s ease-in 0s !important;
    margin: 0 !important;
    padding: 0!important;
    text-align: center !important;
    height: 200px !important;
    position: absolute !important;
    width: 300px;
    top: 0px;
    left: 0px;
}

left, top, position: absolute i działa. Skopiowane wartości z dema, których u Ciebie nie ma.

[Gość Kamillo]

Próbowałem właśnie z tym top, left i position, ale zawsze mi nie wychodziło. Zdjęcie wyświetlało się dobrze, ale po najechaniu na obrazek dalsze informacje wyświetlały się całkowicie na górze po lewej stronie, a nie w sidebarze. W edytorze działa dobrze. Trochę się dalej pobawiłem i ustawiłem tak:

.view-fourth img {
    position: absolute !important;
}
.view-fourth .mask {
    left: 0 !important;
    position: relative !important;
    top: 0 !important;
}

Działa jak należy. Dzięki.

[Gość Kamillo]

Tak przy okazji, jak zrobić żeby Tekst leciał w bok razem z całym zdjęciem?
http://jsfiddle.net/802nvurr/3/

[Gość Kamillo]

Trzeba dodać .view-fifth:hover .vievx.