Darken the background on a hover - html

Question

again for my website, I want to make a hover on an div class, when you put your cursor on it, his scale gets bigger, I archieved this, now I want it to add like an '!important' cause as you can try here : http://stefanspeter.fr/about-test.html , the middle div for example get his text cuts on the side. I want to fix this problem first, then I would like to darken everything around this window, and to be fair I don't have a clue about how to make that happens.
I tried to add an !important tag, not knowing if it would work, and the way I did wasn't working actually.
Here is the code I'm using now :
.job {
background: #515151;
padding: 0.5rem;
border-bottom: #eece1a 5px solid;
}
.jobzoom:hover {
transform: scale(1.2);
font-size: 22px;
}
<div class="job jobzoom col-sm">
<h3>Alternance chez <a class="link-2 about-link" href="www.hb-digit.com" target="_blank">HB-Digit</a> et <a class="link-2 about-link" href="https://www.efficom-lille.fr/" target="_blank">Efficom</a></h3>
<hr class="about-hr" />
<h4 class="text-secondary">Août 2019 - Août 2020</h4>
<hr class="about-hr" />
<p>
Je suis actuellement en alternance chez HB-Digit sous l'école supérieur Efficom.<br /> Mes principales missions :
<ul>
<li>Développement de services web (Drupal8, php, bootstrap, twig, JS, jQuery...)</li>
<li>Gestion relation client via méthode Agile (Jira)</li>
<li>Etablissement et respect des cahiers des charges</li>
</ul>
</p>
Actual output : hover get the scale correctly
Expected : darken the background while it's hovering, stopping the cut by the others div surrounding it.
Thank you

Answer 1

I see the text being cutted on the side you already solved.
So, here is the solution for the dark background.
First, add a div inside .about-info element as the last one. Use .dark-element class to it:
<div class="about-info">
<!-- ... -->
<div class="dark-screen"></div>
</div>
Then, let's add CSS in order to create the effect.
You are going to make it fixed, fill the whole screen, invisible if no .job element is being hovering, but will appear when any element is hovered.
So we can use some properties like transition, visibility, point-events and opacity. Also, the selector ~ to select siblings (that are after the element, that's why we put it at the end) will be very useful:
.dark-screen {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
background: black;
pointer-events: none;
transition: 0.76s;
opacity: 0;
}
.job:hover ~ .dark-screen {
visibility: visible;
opacity: 0.6;
}