Ściąga z animacji w CSS

Taktsang

Oddalenie

Arashiyama

Skręcenie

Nałozennie tekstu na zdjęcie po najechaniu

Taj Mahal

Nakładka na zdjęcie

Serengeti

Przybliżenie, tak bya zdjęcie pozostało w ramce

Mu Cang Chai

Przybliżenie z przekręceniem


/* Hover effects */

.photo1 {
    width: 450px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.photo1:hover {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9;
}

.photo2 {
    width: 450px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.photo2:hover {
    -webkit-transform: scale(0.95) rotate(5deg);
    transform: scale(0.95) rotate(5deg);
}

.photo3 {
    width: 450px;
}

.overlay {
    position: relative;
    width: 450px;
    height: 278px;
}

.overlay .link {
    position: absolute;
    display: block;
    width: 450px;
    height: 65px;
    background-color: #111;
    left: 0px;
    bottom: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.overlay:hover .link {
    opacity: 0.8;
}

.overlayt {
    position: relative;
    width: 450px;
    height: 278px;
}

.overlayt .link {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #27a38d;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.overlayt:hover .link {
    opacity: 0.9;
}

.photo4 {
    width: 450px;
}

.photo5 {
    width: 450px;
    height: 278px;
overflow: hidden;
}

.photo5:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.photo5 img {
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.photo6 {
    width: 450px;
    height: 278px;
    overflow: hidden;
}

.fa-search {
    font-size: 60px;
    padding-top: 70px;
}

.photo6:hover img {
    -webkit-transform: scale(1.15) rotate(-5deg);
    transform: scale(1.15) rotate(-5deg);
}

.photo6 img {
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}