new.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    body{
display: flex   ;
gap: 6px;

    }
    div.box{
        border: 3px solid black;
        width: 30%;
        height: 420px;
        border: 1px solid black;
        background-color: antiquewhite;
        box-shadow: 1px ,2px, 3px ,2px  ;
        text-align: center;
        margin-left: 60px;
        margin-top: 60px;
        border-radius: 20px;
        box-shadow:  19px           0px                       58px     red ;
              /* righrside         downside                   blow */
              

    }
    img{
        width: 100%;
        height: 420px;
        border-radius: 20px; 

    }
    :hover.add{
        opacity: 2;
    }
    .add{
        font-size: 30px;
        background: red;
        color: azure;
        width: 80%;
        opacity: 0;
        transition: 2s;
    }
    
</style>
</head>

<body>
    <div class="box">
<img src="pic/dog.jpg.jpg.jpg" alt="">
<p>
    The dog is one of the two most ubiquitous and most popular domestic animals in the world
</p>
<input type="button" value="add to card" class="add">
    </div>
    
</body>
</html>