Have you ever encountered the challenge of transitioning from a normal box-shadow to an inset box-shadow? I'm curious if this is the reason why my transition isn't working, or if there's another issue with my code. What steps should I take if the transition doesn't seem to be functioning in this scenario?
Below is the snippet of the code in question:
.event_con > p:nth-of-type(1),
.event_con > p:nth-of-type(2){
margin-top: 125px;
width: 80px;
height: 100px;
border-radius: 25px;
background: #f7f7f7;
box-shadow: 3px 3px 18px #a5a5a5,
-1px -1px 10px #e2e2e2;
cursor:pointer;
transition:all 0.4s;
}
.event_con > p:nth-of-type(1) {
float: left;
margin-right: 50px;
position: relative;
}
.event_con > p:nth-of-type(1) img {
position: absolute;
left: 28px;
top: 30px;
}
.event_con > p:nth-of-type(2) {
float: right;
position: relative;
}
.event_con > p:nth-of-type(2) img {
position: absolute;
right: 28px;
top: 30px;
}
.event_con > p:nth-of-type(1):hover,
.event_con > p:nth-of-type(2):hover{
background: #efefef;
box-shadow: inset 5px 5px 10px #b5b5b5,
inset -5px -5px 5px #ffffff;
}<div class="event_con">
<p><img src="https://via.placeholder.com/20x35" alt="pre" width="20" height="35"></p>
<p><img src="https://via.placeholder.com/20x35" alt="next" width="20" height="35"></p>
</div><!--event_con-->