CSS Card

Code:

<style>

#parent,#parent2,#parent3 {

width: 25%;

box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2);

margin-left: 50px;

float:left;



}

img {

width: 100%;



}

#content {

padding: 20px 30px;

font-weight:bold;



}

#parent:hover {

box-shadow: 4px 8px 12px 4px rgba(0,0,0,.2);





}

</style>



<div id="parent">

<img src="pic2.jpg" />

    <div id="content">

        <p>Name: XYZ</p>

        <p>Designation: Web developer</p>

    </div>   



</div>



<div id="parent2">

<img src="pic2.jpg" />

    <div id="content">

        <p>Name: XYZ</p>

        <p>Designation: Web developer</p>

    </div>   



</div>

<div id="parent3">

<img src="pic2.jpg" />

    <div id="content">

        <p>Name: XYZ</p>

        <p>Designation: Web developer</p>

    </div>   



</div>