Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body, html{
                padding: 0;
                margin: 0;
            }
            .content_1{
                float: left;
                width: 400px;
                height: 350px;
                overflow: hidden;
                position: relative;
            }
            .pic_1{
                height: 100%;
                width: 450px;
                transition: .5s ease;
                transform: translateX(-50px);
                filter: grayscale(70%) brightness(60%);
            }
            .pic_1 img{
                height: 100%;
                overflow: hidden;
            }

            .content_1:hover .pic_1{
                transform: translateX(0);
                filter: grayscale(0%) brightness(100%);
            }
            .caption{
                position: absolute;
                top: 25%;
                left: 5%;
                width: 50%;
                height: 50%;
            }
            .caption h3{
                color: white;
                margin: 10px 0;
                font-size: 20pt;
                transform: translateY(150px);
                transition: .4s ease;
            }
            .caption div{
                color: white;
                transform: translateY(300px);
                transition: .4s ease;
                opacity: 0;
            }

            .content_1:hover .caption h3{
                transform: translateY(50px);
            }
            .content_1:hover .caption div{
                transform: translateY(50px);
                opacity: 1;
            }
            .reset{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
        <div class="content_1">
            <div class="pic_1">
                <img src="img/kep.jpeg" alt="stockphoto">
            </div>
            <div class="caption">
                <h3>cim</h3>
                <div>egy sornyi szöveg</div>
            </div>
        </div>
    </body>
</html>