Я пытаюсь заставить box-shadow работать как слайд-анимация над img, делая черный фон слева направо. Но я не могу сделать это без этой странной проблемы с морганием. Я уже искал решения вокруг переполнения стека.
Пробовал и с разделом вместо имга, но результат тот же.
HTML
<section>
</section>
CSS
section {
border:black 1px solid;
width:500px;
height:200px;
transition:1s ease-out
}
section:hover{
box-shadow:inset 500px 0 0 #222;
float:left;
transition:1s ease-out;
}
Похоже, это результат того, как нарисовано box-shadow. Попробуйте другой подход. Вот решение без мерцания, которое утолщает левую границу вместо добавления тени блока:
div {
position: relative;
display: inline-block;
}
section {
border: black 1px solid;
width: 500px;
height: 200px;
transition: 1s ease-out;
box-sizing: border-box;
}
div:hover section {
border-left-width: 500px;
float: left;
transition: 1s ease-out;
}
section~* {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #888;
}<div class="prog">
<section></section>
<p>Here's some text content.</p>
</div>https://jsfiddle.net/k5kznmvL/
Другое решение, использующее простой псевдоэлемент и применяющее переход к ширине путем изменения его свойства right:
section {
border: black 1px solid;
width: 500px;
height: 200px;
position:relative;
color:#c2c2c2;
text-align:center;
padding-top:50px;
box-sizing:border-box;
}
section:before {
position: absolute;
content: " ";
top: 0;
bottom: 0;
left: 0;
background: #000;
right: 100%;
transition:1s ease-out;
z-index:-1;
}
section:hover::before {
right:0;
}<section>
add your text here
</section>Вы также можете просто добавить в начальное состояние какой-нибудь макет тени коробки, который имеет очень маленький радиус распространения.
section {
box-shadow: inset 0 0 0 0.01px white;
}
