CODEWITHSUNDEEP
css
lucifercifer
lucifercifer

Reputation: 93

CSS box-shadow transition with hover to inset-box shadow

I've read once, about how transition for normal box-shadow to inset box-shadow is not available. I wonder if that's the reason why my transition is not working or is there any problem with my codes? Also what should I do if the transition cannot be working in this case?

here is my code just in case:

.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-->

Upvotes: 0

Views: 1891

Answers (2)

Mukul Kapoor
Mukul Kapoor

Reputation: 185

.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:ease 0.4s all;
}

.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: 0px 0px 0px #a5a5a5,
    -1px -1px 10px #e2e2e2, 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-->

We can have a workaround here by specifying a 0px OUTER shadow on hover AND an inset shadow as required.

If we only provide an INSET shadow, the INNER shadow simply overrides the normal OUTER shadow css.

I hope I have been able to explain this :D

Upvotes: 2

Kaiido
Kaiido

Reputation: 137006

Indeed, you can not transition from inset to normal.

But, as you are already doing, you can have multiple box-shadows applied.

So one workaround is to transition your normal box-shadows to 0, and transition the inset ones to the expected value:

.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,
          inset 0px 0px 0px  #a5a5a5,
          inset 0px 0px 0px  #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: 0px 0px 0px #b5b5b5,
                0px 0px 0px #ffffff,
         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-->

Upvotes: 1

Related Questions