» » Картинка с частичным увеличением

Картинка с частичным увеличением

День добрый! Возможно вы уже видели такое оформление картинки. А может кто-то и нет. Но мне так понравилась эта идея частичного увеличения картинки, что решила поделится с вами. Сперва я боялась, что картинка с таким стилем не установится в статье, но как видите код работает. Нашла этот вариант оформления на сайте https://atuin.ru/.

Увеличение картинки

Сперва само оформление.
Увеличение картинки
<div class="photo-container">
    <div class="photo-one"><img src="photo.jpg" /></div>
    <div class="photo-two"><img src="photo.jpg" /></div>
</div>
<style>.photo-container, .photo-one, .photo-two {
    overflow: hidden;
    position: relative;
}
.photo-one img, .photo-two img {
    width:100%;
    display:block;
}
.photo-one {
    position:absolute;
    width:100%;
}
.photo-two {
    width:20%;
    animation: blockshift 6s infinite linear;
}
.photo-two img{
    position:relative;
    width:500%;
    animation: imgshift 6s infinite linear;
    transform: scale(1.1);
}
@keyframes blockshift {
    from {left:-20%;}
    to {left:100%;}
}
@keyframes imgshift {
    from {left:100%;}
    to {left:-500%;}
}</style>

Фотографии добавляем одинаковые, менять размер не нужно. В стилях уже прописано увеличение второй картинки. Единственный совет, для этого оформления фото должно быть качественным. 
И второй вариант этого же оформления.
Полоса более широкая и ходит по картинке туда-сюда, туда-сюда. 
Увеличение картинки 2
<div class="photo-container">
    <div class="photo-one"><img src="photo.jpg" /></div>
    <div class="photo-two"><img src="photo.jpg" /></div>
</div>
<style>.photo-container, .photo-one, .photo-two {
    overflow: hidden;
    position: relative;
}
.photo-one img, .photo-two img {
    width:100%;
    display:block;
}
.photo-one {
    position:absolute;
    width:100%;
    opacity:0.7;
} 
.photo-two {
    width:50%;
    animation: blockshift 6s infinite linear;
} 
.photo-two img{
    position:relative;
    width:200%;
    animation: imgshift 6s infinite linear;
}
@keyframes blockshift {
    from {left:10%;}
    50% {left:40%;} 
    to {left:10%;}
}
@keyframes imgshift {
    from {left:-20%; transform: scale(1.1);}
    25% {transform: scale(1.15);}
    50% {left:-80%; transform: scale(1.1);}
    75% {transform: scale(1.15);}
    to {left:-20%; transform: scale(1.1);}
}</style>
Так же добавляем одинаковые картинки.
Куда можно добавить эту красоту пока не придумала, но не думаю что на это сайт. А вот на какой-нибудь другой, например интернет-магазин или развлекательный, вполне подойдёт. Так же подходит такое оформление для сайта рукоделия. Показывать свои работы сразу с увеличением.
Работоспособность кодов проверяем в редакторе.

Ваши комментарии:

Комментарии со спамом удаляются.