1

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

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

1 ответ 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>

1
  • Спасибо большое за ответ выглядит просто супер! Я пробовал создать сам но у меня получилось слишком грубо и не красиво) 23 апр 2015 в 12:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.