There is a div , background-image registered in it. How to use :hover to make the image translucent under the text and display the text that we don’t see before the guidance (with the text did so color: transparent -> color: black ).

  • The code in the studio .... - Urmuz Tagizade
  • try using the pseudo element css-tricks.com/snippets/css/transparent-background-images - m0sk1t
  • Thanks for the advice, it turned out the same as inserting another div inside with the necessary parameters and opacity. - Andriy Babaritsky
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

If I understand you correctly, then the easiest way is this:

https://jsfiddle.net/pleshevskiy/wv8ehs70/

 div { position: relative; width: 100px; height: 100px; color: rgba(0,0,0,.0); transition: all 1s ease-in-out; } div:before { position: absolute; top: 0; left: 0; display: block; content: ''; width: 100px; height: 100px; background: #ccc url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'); background-size: 100%; opacity: 1; transition: all 1s ease-in-out; } div:hover { color: rgba(0,0,0,1); } div:hover:before { opacity: .5; }

And so throw off the code if you want to get a direct answer.

     .block { position: relative; width: 200px; height: 200px; background: url('http://www.nature-et-yoga.com/images/banner-accueil.jpg') no-repeat center top; } .block:before { content: ''; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); -webkit-transition: 0.3s; transition: 0.3s; } .text { color: #fff; font-size: 25px; position: absolute; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.3s; transition: 0.3s; } .block:hover:before, .block:hover .text { opacity: 1; } 
     <div class="block"> <div class="text">text</div> </div>