I want to make sure that when you hover over a large block of an image (red-white), the picture of the circle (which is inside) changes to another image of the circle.

Here, for clarity, what effect I want to get:

enter image description here

enter image description here

PS Most likely it can be done through the tilde, but I did not succeed.

  • First you should put your code with which there are problems - lexxl
  • As an option - you can screw the JS, that when you hover (hover) on the block to change the picture. But I will add to the comment above - code is required, which is already working. - Legionary

1 answer 1

I will offer two options. 1. This whole red-white block has as a background a picture with this circle in the center. When hovering, change the picture (or rather use the sprite and change the background offset).

.block{ background:#fff url('someimage.png') 0 0 no-repeat; } .block:hover{ background-position:0 100%; }
  1. A large block has a constant background, and inside it a block containing a variable background

.

 .block{ background:#fff url('someimage.png') 0 0 no-repeat; } .block .inblock{ background:#fff url('someimage2.png') 0 0 no-repeat; } .block:hover .inblock{ background-position:0 100%; }