Tell me please. Here is the code http://jsfiddle.net/fymczv5v/

Here, when you hover, the image is attenuated from the edges, but after it there is a black background, how to prevent this from happening and only the background that is applied to the entire document remains?

  • Where is the code? - DreamChild
  • Oops) corrected, forgot to press the Save button. - SkyWay

1 answer 1

This is not the fading of the image, but the imposition of a layer with a uniform background on the image and a smooth display of this layer when you click on the image. The transparency of the picture does not change. The background color of this layer will not adjust automatically for the background color of the page. Think about how to change the transparency of the image itself.

  • Yes, that's the problem, that it's just transparency, it goes right to the whole element at once, but it’s necessary that from two sides from the edges to the center ... as I understand it, in my case it’s not really possible to fix it? - SkyWay
  • You can think of something, for example, with scaling transparency masks -webkit-mask-image. Those. create a large mask and smoothly reduce it, thereby reducing the visible space of the image. Here are examples of the movement css-tricks.com/webkit-image-wipes But it will work in Chrome and Safari and then it is not exactly the same. - Get