htmldropshadow

Drop Shadow On & Off Image


Drop Shadow On & Off Image

What is the code to do this? The html section is where I need help, maybe everywhere else too : )

See codepen https://codepen.io/davidhelp/pen/Babqmqo?editors=1100

   img {
    max-width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.55) 5px 9px 9px;
    }

   .img1 {
    max-width: 100%;
    height: auto;
    box-shadow: none !important;
    }
<div class="container">
   <div class="cell1"><img src="minion2.jpg" width="117" height="165" alt=""><br>1 shadow</div>

    <div class="cell2"><img src="minion2.jpg" width="117" height="165" alt=""><br>2 no shadow</div>
</div>

Solution

  • You missed to add "img2" class in the 2nd image. write

    <img class="img2" src="minion2.jpg" width="117" height="165" alt="">
    

    Or, in the css; you can target the parent container like this:

    .cell2 img {
        max-width: 100%;
        height: auto;
        box-shadow: none !important;
    }