div.list-objects:after {
content: "";
pointer-events:none;
position: absolute;
top: 0;
right:0;
bottom:0;
left: 0;
height: 100px;
width: 300px;
transition: box-shadow 0.5s ease;
border-radius:15px;
box-shadow: inset 0px 0px 61px 7px rgba(0,0,0,0.75);
opacity: 0;
transform: scale(3.2);
transition: opacity 0.9s ease-in-out;
}
div.list-objects:hover:after {
opacity:1;
}<div class="col-md-2 col-sm-3 col-4 item-grid">
<a href="">
<div class="list-objects">
<div class="list-thumbnail"><img src="https://cdn.pixabay.com/photo/2016/07/07/16/46/dice-1502706_640.jpg" data-src="https://cdn.pixabay.com/photo/2016/07/07/16/46/dice-1502706_640.jpg" class="small-thumb ls-is-cached lazyloaded" alt="A Game"></div>
<div class="list-content">
<div class="list-title">A Game Title</div>
</div>
</div>
</a>
</div>As you can see, it seems like editor doesn’t recognize box-shadow on “transition: box-shadow 0.3s”
If someone would be able to explain what’s the problem, I would be happy, as I am stuck.
I am trying for a long time to add an animated box-shadow above the image on hover and I was looking what’s the cause of the problem and if there is a good alternative or fix, but I didn’t find anything useful.
New contributor
David No is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
11