I have a diva in which there is a circle (also div):

enter image description here

which becomes visible only when hovering, and the text inside:

enter image description here

My task is to ensure that the text when hovering is not translucent, like the circle inside which it is located, but normal. For some reason, the text inside the inner-circle diva accepts all its properties, although I set the opacity: 1; property for the text separately opacity: 1; on hover.

 #outer-circle1 { background: url('https://i.stack.imgur.com/JuXam.jpg'); background-position: 4px 1px; border-radius: 50%; height: 200px; width: 200px; position: relative; } #inner-circle { position: absolute; background: #a9aaab; border-radius: 50%; height: 150px; width: 150px; opacity: 0; top: 50%; left: 50%; margin: -75px 0px 0px -75px; } #inner-circle:hover { opacity: 0.4; } .text { font-size: 20px; font-weight: bold; margin-top: 5px; visibility: hidden; position: relative; } #inner-circle:hover .text { visibility: visible; opacity: 1; } 
 <div id="outer-circle1"> <div id="inner-circle"><p class="text"><br/><br/>More</p></div> </div>

  • I corrected your snippet to display at least something. Can you add it to the styles "do not climb"? And then the picture somehow climbs strongly. - Vadim Ovchinnikov
  • Probably better done for #outer-circle1 background-position: center; #outer-circle1 background-position: center; . - Vadim Ovchinnikov
  • Thank you For some reason, no matter how I tried the text was displayed crookedly. Now is great. - Adonxx
  • By the way, you can also replace the margin: -75px 0px 0px -75px; on transform: translate(-50%, -50%) . This allows you to change the width and height flexibly, without touching the margin (setting half the height and width). - Vadim Ovchinnikov

2 answers 2

To prevent opacity being inherited by other elements, instead of opacity set the background-color via rgba , where set the transparency in component a . That is, instead of opacity: 0.4; write background-color: rgba(255, 255, 255, 0.4); (it is translucent white).
Also fixed some other rough edges of this markup:

 #outer-circle1 { background: url('https://i.stack.imgur.com/JuXam.jpg'); background-position: center; border-radius: 50%; height: 200px; width: 200px; position: relative; } #inner-circle { position: absolute; background: #a9aaab; border-radius: 50%; height: 150px; width: 150px; background-color: rgba(255, 255, 255, 0); top: 50%; left: 50%; transform: translate(-50%, -50%) translate(-4px, -1px); } #inner-circle:hover { background-color: rgba(255, 255, 255, 0.4); } .text { font-size: 20px; font-weight: bold; margin-top: 5px; visibility: hidden; position: relative; } #inner-circle:hover .text { visibility: visible; } 
 <div id="outer-circle1"> <div id="inner-circle"><p class="text"><br/><br/>More</p></div> </div>

UPDATE

To also combine fixed values ​​and percentages, you can

 transform: translate(-50%, -50%)

replaced by

 transform: translate(calc(-4px - 50%), calc(-1px - 50%));

on either

 transform: translate(-50%, -50%) translate(-4px, -1px);
  • Thank you, now everything has become as it should, the reason for which I set the background-position as 4px 1px is that the circle on the background image is not quite in the center, and that when you hover the divs fit exactly into the circle, I corrected it. Now everything works, tell me what transform means: translate (-50%, -50%)? - Adonxx
  • This means moving the element from its own dimensions to 50% of the width along the X axis and 50% of the height along the Y axis. And you will play with different parameters and understand more clearly. Until you try, it will be easily forgotten. - Vadim Ovchinnikov
  • @Adonxx Updated the answer about the combination of interest and fixed values ​​in the transform . I strongly advise you to study this property. There, in addition to moving, you can also rotate and scale elements in an unlimited number in one sitting. - Vadim Ovchinnikov
  • Thank you very much! Be sure to take into account everything you said. - Adonxx

 #outer-circle1 { background-image:url(https://i.stack.imgur.com/JuXam.jpg); transition: all 0.3s cubic-bezier(.25,.8,.25,1);//сделает замедление } #outer-circle1:hover { background-image:(путь к твоей картинки при наведении); } 
 <div id="outer-circle1"> <div id="inner-circle"><p class="text"><br/><br/>More</p></div> </div>

  • -1 And why can not a specific example show the result? Why do I need to write some abstract algorithm? - Vadim Ovchinnikov
  • as the error code given in the example is Vadim
  • The code is already fixed, I edited before your answer. - Vadim Ovchinnikov