Можно ли как-то сделать эффект такой же как на этом видео https://www.youtube.com/watch?v=Ccwzz09WaYU , но только без дублирования картинки?
1 ответ
Целиком как на видео делать поленился, могли бы код минимальный сделать. Остальное по примеру доделаете.
* {
margin: 0;
padding: 0;
}
.effect {
position: relative;
background: url(https://images.yoins.com/thumb/big/oaupload/yoins/images/78/22/0e91e46a-b33c-45a8-8d0a-fd3f74a86dc3.jpg) no-repeat right center / cover;
width: 200px;
height: 300px;
margin: 30px auto;
overflow: hidden;
}
.effect:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border-left: 1px solid #fff;
background: inherit;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: All 1s ease;
-o-transition: All 1s ease;
transition: All 1s ease;
}
.effect:hover:before {
left: 100%;
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
<div class="effect"></div>
-
1только из за фотки я удалил - жесть + от меня– user3327425 мая 2018 в 11:17
-
@МаксимЛенский зря удалил. Вариант с использованием JS тоже актуальный, если в разметке будет не
background
у блока, а<img>
. 26 мая 2018 в 8:27 -
думаешь восстановить стоит ?– user3327426 мая 2018 в 8:28
-
-
1
position:abcolute;
снизу черно-белая картинка, и приhover
, верхний слой расширяется, цветная картинка