CODEWITHSUNDEEP
javascriptjquerycss
nn3112337
nn3112337

Reputation: 599

Sliding the color out of an image

Pretty weird to explain. Basicly I have 4 hearts in a row, they look like this (empty and full)
enter image description here

enter image description here

So I have this row of hearts, all are full. I want to basicly slide the color out of it. So its red, and then the grey color stats slowly sliding in from the right until the complete heart is grey. I had the idea that I mask the grey image and put a red square in and slide that to the left, but I have no idea how to do that.
Google isnt helping me, only finding fade and image cycler effects.

Thanks in advance

Upvotes: 2

Views: 64

Answers (3)

ngstschr
ngstschr

Reputation: 2329

You could use a combination of css mask and css animation translate:

hover on heart:

.wrap,
.grey-bg,
.red-bg {
  height: 100px;
  position: relative;
  width: 100px;
}
.wrap {
  mask: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png);
  -webkit-mask: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png);
  overflow: hidden;
}
.grey-bg {
  background: grey;
}
.red-bg {
  background: red;
  left: -100px;
  position: absolute;
  top: 0;
}

.wrap:hover .red-bg {
  animation: move 3s ease;
  animation-fill-mode: forwards;
  
}
@keyframes move {
  100% {
    transform: translate(100px, 0);
  }
}
<div class="wrap">
  <div class="grey-bg"></div>
  <div class="red-bg"></div>
</div>

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>

Upvotes: 0

Akshay
Akshay

Reputation: 14368

You can place two divs containing img over each other and increase the width to create the slide effect.(Hover over the heart to see it)

.container {
    width:30px;
    height:30px;
    position:relative;
}
.container div {
    position:absolute;
    height:100%;
    transition:.5s all;
    overflow:hidden;
}
.container img{
    width:20px;
}
.one {
    width:100%;
}
.two {
    width:0;
    height:100%;
}
.container:hover .two{
    width:100%;
}
<div class="container">
    <div class="one">
        <img src="https://i.sstatic.net/5uToI.png">
    </div>
    <div class="two">
        <img src="https://i.sstatic.net/j7ovV.png">
    </div>
</div>

Upvotes: 2

divoom12
divoom12

Reputation: 812

You can create this class in CSS:

.desaturate { 
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

And use it on every element that you like. This is the best & easiest solution that I know. Hope it helps.

Edit: To animate it, set the filter to none in the default styles, and set a transition: all 0.3s. That way, when you add the class to the element/image, it will slowly change.

Upvotes: 0

Related Questions