Image hover

https://drive.google.com/open?id=1rRE0zPC_K4Jkhlbu3h-EP0Rli4k_h2YM


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!--
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->

    <link rel="stylesheet" href="css/style.css">

    <style type="text/css">


*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: sans-serif;
}


.maindiv{

    width: 1280px;
    min-height: 500px;
    background-color: #1abc9c;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;

}

.maindiv .box{

position: relative;
width: 300px;
height:300px;
background-color: #ff0;
margin: 10px;
box-sizing: border-box;
display: inline-block;


}


.maindiv .box .imgbox{
position: absolute;

width: 100%;
height: 100%;
overflow: hidden;

}


.maindiv .box .imgbox img{

  max-width: 100%;
  height: 100%;

}

.maindiv .box:hover img{

    transform: scaley(1.2);
    transition: 2s;

    }


.details{
    position: absolute;
    top:20px;
    bottom:10px ;
    left:10px ;
    right:10px;
    color: #fff;
    text-align: center;
    transform: scale(0);
    transition: transform .7s;
    background-color: rgba(0,0,0,.8);
}

.details .content{
    position: absolute;
    top: 50%;

    transform: translateY(-50%);
    text-align: center;
    padding: 15px;

}

.maindiv .box:hover .details{
    transform: scale(1);


}


.details .content h2{

    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #ff0;


}


.details .content p{

    margin: 10px 0 0;
    padding: 0px;

}


    </style>

</head>
<body>


    <div class="maindiv">
        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->

        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->


<div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->

        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->


        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->

        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->


<div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->

        <div class="box">
            <div class="imgbox">
                <img src="img/1.jpg">
            </div>
        <div class="details">
            <div class="content">
                <h2>wht is lorem ispsum?</h2>
                <p>It is a long established fact that a reader will be distracted by the readable like readable English. Many desktop publishing a </p>
            </div>
        </div>
        </div>  <!--End box-->

    </div>


</body>
</html>