Как сделать такой эффект перекрытия фото?

Question

Как сделать такой эффект перекрытия фото?

Рейтинг: 1Ответов: 1Опубликовано: 22.04.2015

Здравствуйте! Подскажите как можно сделать такой эффект перекрытия фото? введите сюда описание изображения

Не могу понять как реализовать такую картинку чтобы при наведении на верхнюю картинку она открывалась полностью. А при отведении мыши все возвращалось в исходное положение. И с нижней картинкой так же. Если кто встречал похожий эффект подскажите где почитать или как реализовать его.

jquery css3

Источник: Stack Overflow на русском

Answer 1

▲ 5Принят

С css transform можно попробовать поиграться, примерно так на скорую руку:

.demo{
    position:relative;
    width:250px;
    height:250px;
    overflow:hidden;
}
.demo img{
    display:block;
    width:100%;
    height:100%;
}
.demo div{
    position:absolute;
    top:0;
    left:-104px;
    width:354px;
    height:354px;
    transform:rotate(-45deg);
    transform-origin:100% 0;
    overflow:hidden;
    background:red;
    transition:transform .5s ease;
}
.demo div img{
    transform:rotate(45deg);
    transform-origin:100% 0;
    transition:transform .5s ease;
}
.demo img:hover+ div{
    transform:rotate(-90deg);
}
.demo div:hover{
    transform:rotate(0);
}
.demo div:hover img{
    transform:rotate(0);   
}

<div class="demo">
    <img src="http://yanshin.pro/stuff/user.gif" alt=""/>
    <div>
        <img src="http://yanshin.pro/stuff/test.png" alt=""/>
    </div>
</div>

Как сделать такой эффект перекрытия фото?

Ответы