<main>
        <div class="card_desing_cnt">
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://www.imagejournal.org/wp-content/uploads/2015/03/5367076891_da41235a47_b-300x200.jpg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://www.imagejournal.org/wp-content/uploads/2015/03/14605081026_945bd79d28_k-300x200.jpg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://learn.getgrav.org/images/f/6/1/8/0/f61805345ab44e4c35c6f7f7e32c625f5aff0785-sample-image.jpeg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://fblikeshayaris.files.wordpress.com/2013/09/863c0-natural-image-high-resolution.jpg?w=300" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="http://examjobs.in/wp-content/uploads/2017/02/propose-day-300x200.jpg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
            <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://fblikeshayaris.files.wordpress.com/2013/09/863c0-natural-image-high-resolution.jpg?w=300" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
           <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="http://www.wallpapersset.in/wp-content/uploads/2016/12/Audi-A7-on-road-hd-image-wallpaper-download-300x200.jpeg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
</div>
           <div class="crd_dsgn">
                <a href="javascript:;">
                    <div class="crd_img">
                        <img src="https://www.exeterexpressandecho.co.uk/images/localworld/ugc-images/276269/Article/images/30161456/15875502-mobile.jpg" alt="">
                    </div>
                    <div class="crd_hdng">
                        <h5>Massage &amp; Beauty</h5>
                    </div>
                </a>
            </div>
        </div>
    </main>

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900');
    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box; 
        box-sizing: border-box; 
    }
    body {
        font-size: 14px;
        font-family: 'Lato', sans-serif;
        background-color: #181924;
        padding: 5%;
    }
    img {width: 100%;}
    a { text-decoration: none; display: block;}
    .crd_dsgn {
        width: 300px;
        border:1px solid #c2986b;
        height: 260px;
        float: left;
        margin: 0 30px 40px 0;
        transition: all 0.5s ease-in-out 0s;
    }
    .crd_dsgn  a { display: block; }
    .crd_img {
        width: 100%;
        height: 200px;
        overflow: hidden;
        margin: -10px 0 0 -10px;
        transition: all 0.5s ease-in-out 0s;
    }
    .crd_img img {
        height: 100%;
        transform: scale(1.0);
        transition: all 0.9s ease-in-out 0s;
    }
    .crd_hdng h5 {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        line-height: 50px;
        font-size: 18px;
        font-weight: normal;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-top: 10px;
        transition: all 0.5s ease-in-out 0s;
    }
    .crd_dsgn:hover .crd_img { margin: 0;}
    .crd_dsgn:hover .crd_hdng h5 { margin-top: 5px; }
    .crd_dsgn:hover { background-color: #c2986b; border-width: 3px;}
    .crd_dsgn:hover .crd_img img { transform: scale(1.5); }