7

Long story short, I want my (any) image to change the color on hover, but I can't make it work well on PNG images. The problem is with transparency. I don't want to apply my color on transparent space. My CSS looks like this:

background-blend-mode: color-burn;
background-color: #edeb52;

Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.

satnam
  • 10,719
  • 5
  • 32
  • 42
Patrik Krehák
  • 2,595
  • 8
  • 32
  • 62

5 Answers5

8

6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:

.maskedimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
  mask-size: cover;
}

.maskedimage.blue {
  background-blend-mode: luminosity;
  background-color: blue;
}

.maskedimage.red {
  background-blend-mode: luminosity;
  background-color: red;
}

.maskedimage:hover {
  background-blend-mode: multiply;
  background-color: red;
}
<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>

Alternatively you can get a similar effect using css filters:

.filteredimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
}

.filteredimage.blue {
  filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}

.filteredimage.red {
  filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}

.filteredimage:hover {
  filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}
<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>

Your mileage may vary.

Moob
  • 14,420
  • 1
  • 34
  • 47
  • Well, well, well. Seems cool and also working in firefox. I think we made other solution to this problem, so I don't relly need to solve this anymore, but it surely will be helpful in the future. Thanks. – Patrik Krehák Jun 02 '18 at 13:06
1

This can be done with css, but unfortunately browser support is very bad (may be webkit only).

https://jsfiddle.net/devefrontend/fowzemd2/2/

.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}

and this may be the same question as you:

Is there any way to colorize a white PNG image with CSS only?

saiful
  • 685
  • 6
  • 12
  • Not compatible in many browsers [doc](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image) – Durga Nov 09 '17 at 09:20
  • 1
    You can also get this to work in FireFox with slight help from svg. http://jsfiddle.net/uw1mu81k/4/ – saiful Nov 09 '17 at 09:22
  • That seems dope but that browser support is not good. Seems I need to look for another solution. Surely will give a try to that SVG filter. – Patrik Krehák Nov 09 '17 at 09:28
0

Its is a Example

you can more learn it https://www.w3schools.com/howto/howto_css_image_overlay.asp

.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {

  color: white;
  font-size: 16px;
width:400px; height:350px;
}
<div class="container">
  <img src="http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle"  ">
    <div class="text">example</div>
  </div>
</div>
core114
  • 5,155
  • 16
  • 92
  • 189
0

Try like this. See if it is helpful. I have used filter property here.

.image {
  display: inline-block;

  
}
.image .img {
  width: 375px;
  height: 360px;
  background-image: url('http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png');
  background-size: cover;

-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
<div class="image">
  <div class="img"></div>
</div>
All about JS
  • 562
  • 2
  • 10
  • Thanks, but that's not exactly what I need. It has to change the color to exact color. Your example would not work well for colorful images. – Patrik Krehák Nov 09 '17 at 09:40
0

Does it have to be PNG? Preferably you could use an inline svg. This way you can not only apply a fill color of your choice via css but you also get all the benefits of vector based graphics: Crispy on any size and smaller file (be sure to optimize with svgo)

pxxx
  • 78
  • 6
  • Unfortunately these images are client's images which should change the color on hover, so it can be PNG or JPG or GIF. Don't know what they will upload :) – Patrik Krehák Nov 09 '17 at 09:53
  • Okay, that's unfortunate. Can you use php for server side image processing? Not tested but a library like [grafika](https://github.com/kosinix/grafika) might work. If you have the budget you could also serve your images via a CDN. Services like cloudinary or imgix also offer image manipulation on the fly via parameters. – pxxx Nov 09 '17 at 10:00
  • I'm using PHP as backend, but it would be better to use just frontend. I will think about better hover effect. – Patrik Krehák Nov 09 '17 at 10:08