popupbutton.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pop up button </title>
    <style>
        .main1{
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: auto;
            position: relative;


        }
        .main2{
             width: 400px;
             height: 50px;
             background-color: black;
             color: aliceblue;
             position: absolute;
            left: 0px;
            bottom: -40px;
            opacity: 0;
            transition: 1s;
        }
        .main1:hover .main2{
          bottom: 0px;
          opacity: 70%; 
           
        }
    </style>
</head>
<body>
   <div class="main1">
<img src="prashant.JPG" alt="" width="100%" height="100%">
<input type="button" name="Add to cart" value="add to cart" class="main2">   
</div> 

</body>
</html>