Edit in JSFiddle

	/* a few initial styles for our containing elements */
	body {background:#282828 url(http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/texture.jpg); font-size: 100%; font-family:Georgia, serif;}
	.wrap {width:75%; margin:0 auto; overflow: hidden; text-align: center;}
	ul {width: 80%;margin:6em auto; padding:0;}
	li {list-style:none; float:left; display:block; margin:0 3%;}
	
	
	/*Our pet list items */
	.pet {
		width:200px;
		padding:2em 1em 1em 1em; 		
		text-align: center;	
		
		-webkit-transition: all 300ms ease-out;
		   -moz-transition: all 300ms ease-out;
		    -ms-transition: all 300ms ease-out; 
		     -o-transition: all 300ms ease-out;
		        transition: all 300ms ease-out;
	}		
	.pet img {
		margin:auto;
		display:block;		
		
		-webkit-transform: scale(.9);
		   -moz-transform: scale(.9);
		    -ms-transform: scale(.9);
		     -o-transform: scale(.9));		
		        transform: scale(.9);
	
		-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		   -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		    -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		     -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
		        transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	}	
	.pet:hover {
		background-color:white;
		background-color: rgba(200,200,200,.3);
		-webkit-border-radius: 10px;
		border-radius: 10px;		
		cursor: pointer;
	}	
	.pet:hover img {
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1));
		-ms-transform: scale(1);
		transform: scale(1);
	}	
	.pet:hover h2 {
		color:#c9a833;		
	}	
			
	
	/*Our type styles*/
	h1, h2, p {color: #fcfcfc;}
	
	h1 {
		color:white;
		font-weight: bold;
		font-style: italic;
	}
	h2 {
		font-family:Arial, sans-serif;
		font-size:1em;
		color:#da581f;
		margin:1em 0 0 0;
	}
	p {
		font-family:Arial, sans-serif;
		font-size:.8em;
		margin:.5em 0 1em 0;
	}
<body>
	<div class="wrap">
			
		<ul>
			<li class="pet">
				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item1.png" />
				<h2>Item 1</h2>
				<p>Dscr 1</p>
			</li>
			
			<li class="pet">
				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item2.png" />
				<h2>Item 2</h2>
				<p>Dscr 2</p>
			</li>
			
			<li class="pet">
				<img src="http://shohagbhuiyan.info/blog/wp-content/uploads/2015/03/item3.png" />
				<h2>Item 3</h2>
				<p>Dscr 3</p>
			</li>				
		</ul>

		</div><!-- .wrap -->

	</body>