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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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