Here in the example, click on the yellow button and the demo of the site will open, somewhere in the middle of the site there are 5 pictures, when you hover over them with a background, and the text turns black. how to do it?

Closed due to the fact that off-topic participants Alexey Shimansky , Kromster , Grundy , αλεχολυτ , Streletz March 31 '17 at 19:28 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Alexey Shimansky, Kromster, Grundy, αλεχολυτ, Streletz
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • View the source of the page. If additional questions appear, add them to the body of the main question. - ߊߚߤߘ

1 answer 1

this effect can be achieved by the CSS property transition ;

.block { border: 1px black solid; width: 100px; height: 300px; float: left; margin-right: 20px; position: relative; background-color: black; transition: background-color 1s; } .block:hover { background-color: white; } 
 <div class="block"></div> <div class="block"></div> <div class="block"></div>