.price-building { background: url(../photo/vlcsnap-2018-09-10-13h28m31s589.png); background-position-x: -815px; opacity: 1; } .price-building:hover { ## Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ##opacity: 0.4; transition: 1s; } .price-business { background: url(../photo/Business-People-Desk.jpg); background-position-x: -1500px; opacity: 1; } .price-business:hover { opacity: 0.4; transition: 1s; } .judge-expert { background: url(../photo/ph2ylsyy377100.jpg); background-position-x: -300px; opacity: 1; } .judge-expert:hover { opacity: 0.4; transition: 1s; } .dispute { background: url(../photo/corporate-alliances-that-get-results.jpg); background-position-x: -750px; opacity: 1; } .dispute:hover { opacity: 0.4; transition: 1s; } 
 <section class="information mask"> <div class="information-container"> <div class="information-content_container price-building"> <div class="information-inner"> <div class="step-title"> <p> ΠΎΡ†Π΅Π½ΠΊΠ°<br> нСдвиТимости </p> </div> </div> </div> <div class="information-content_container price-business"> <div class="information-inner"> <div class="step-title"> <p> ΠΎΡ†Π΅Π½ΠΊΠ°<br> бизнСса </p> </div> </div> </div> <div class="information-content_container dispute"> <div class="information-inner"> <div class="step-title"> <p> оспариваниС<br> кадастровой стоимости </p> </div> </div> </div> <div class="information-content_container judge-expert"> <div class="information-inner"> <div class="step-title"> <p> судСбная<br> экспСртиза </p> </div> </div> </div> </div> </section>

  • And the layout will not be? - Misha Saidov
  • @MishaSaidov now try to add - Yanior
  • @MishaSaidov added, I apologize for the inaccuracy. For the first time I use the function "ask a question". - Yanior 7:08 pm
  • Ok, what does it mean ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½ΠΈΠ΅ тСкста ? Now when you hover the text becomes more transparent. What result do you expect? - Misha Saidov
  • @MishaSaidov I want the text to remain white in the block, as specified in the styles. The problem now is that when you hover over a block, all its components are darkened. I need the text in the block to remain white regardless of pointing to the block. You just need to darken the background (where the photo is inserted). Thank you in advance! - Yanior pm

1 answer 1

Good day, here is one of the possible implementations of your task:

HTML:

 <div class="image-block"> <h1>Hello world</h1> </div>

SCSS:

 html, body { width: 100%; height: 100%; margin: 0; font-family: 'Roboto', sans-serif; } .image-block { position: relative; width: 100%; height: 100%; background: url('http://unsplash.it/1200x800') center center no-repeat; background-size: cover; &::before{ content: ''; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } &:hover:before { opacity: 1; } h1 { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } }

Here is an example on Codepen: link

  • 2
    if you use before, then z-index is not needed - Grundy
  • @Grundy, thanks for the comment, you're right! Now I will correct the answer. - meine
  • @meine thank you! - Yanior
  • @Grundy Thank you very much! - Yanior