как сделать эффект grayscale

213

12 июня 2018, 03:10

Можно ли как-то сделать эффект такой же как на этом видео https://www.youtube.com/watch?v=Ccwzz09WaYU , но только без дублирования картинки?

Answer 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>

Answer 2

я только такое смог придумать clone() на jQuery

$("img").clone().appendTo(".effect").css({ 
  "width": $("img").width(), 
  "height": $("img").height() 
}).addClass("cl");

img { 
  max-width: 100%; 
} 
 
.effect { 
  position: relative; 
  overflow: hidden; 
  width: 200px; 
} 
 
.cl { 
  position: absolute; 
  left: 0; 
  top: 0; 
  filter: grayscale(100%); 
  transition: .3s; 
} 
 
.effect:hover .cl { 
  left: 100%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="effect"> 
  <img src="http://ready.discountcenters.org/10087-1-large_default/%D0%95402-05-%D0%AF%D0%B9%D1%86%D0%BE-%D0%BF%D0%B0%D1%81%D1%85%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5.jpg" alt=""> 
</div>