/*here goes all of your css styling*/

#wrapper{
	width: 700px;
	max-width: 95%;
	margin: 0 auto;
}



/*example 1---------------------------------------------------*/

#content-wrapper-01{
 background: url('images/bg.png');
    height: 300px;
    width: 300px;
   
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
	background-position: center;
}

#content-wrapper-01:hover {
    background-size: 120% 120%;
}





/*example 2---------------------------------------------------*/
#content-wrapper-02{
	height: 300px; 
	width: 300px;
	overflow: hidden;
}
#content-02{
	height: 300px; 
	width: 300px;
	background-image: url("images/bg.png");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center; 
	position: relative;
}

#content-02:hover{
   -webkit-animation: animatedBackground 1s ease-out 1;
		-moz-animation: animatedBackground 1s ease-out 1;
		animation: animatedBackground 1s ease-out 1;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
}

	@-webkit-keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
		-webkit-transform: scale(1.1, 1.1);
		-moz-transform: scale(1.1, 1.1);
		-ms-transform: scale(1.1, 1.1);
		-o-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1)
		}

	}
	
	
	@-moz-keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
			-webkit-transform: scale(1.1, 1.1);
			-moz-transform: scale(1.1, 1.1);
			-ms-transform: scale(1.1, 1.1);
			-o-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1)
		}

	}
	@keyframes animatedBackground {
		0% {
			-webkit-transform: scale(1, 1);
			-moz-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			-o-transform: scale(1, 1);
			transform: scale(1, 1)
		}
		100% {
			-webkit-transform: scale(1.1, 1.1);
			-moz-transform: scale(1.1, 1.1);
			-ms-transform: scale(1.1, 1.1);
			-o-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1)
		}

	}
	
	
/*example 3------------------------------------------------*/
.content-wrapper-03{
	width: 100%;
    height: 100%;
	overflow: hidden;
}
.content-03{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
.content-03:hover {
    -webkit-transform: scale(1.2,1.2);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.2,1.2);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}