@charset "UTF-8";
/* CSS Document */

.box {
	background:url(http://lorempixel.com/300/200/) no-repeat;
	width:300px;
	height:200px;
	overflow:hidden;
	position:relative;
}

.box-frame {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	box-sizing:border-box;
	border:0px solid rgba(255,255,255,0);
	transition:all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 0.7s cubic-bezier(0, 0, 0.4, 2.0);
	-o-transition: all 1s; /* Opera */
	display:block;
}

.box-square {
	width:60px;
	height:60px;
	background:rgba(255,255,255,0.5) center center no-repeat;
	background-size:20px;
	-webkit-transform: scale(0,0) rotate(0deg);
	-moz-transform: scale(0,0);
	transform: scale(0,0);
	position:absolute;
	box-sizing:border-box;
	top:50%;
	left:50%;
	margin-left:-30px;
	margin-top:-30px;
	-webkit-transition:1s -webkit-transform ;
	-webkit-transition:1s ease-in-out;
	-moz-transition:0.3s -moz-transform cubic-bezier(0, 0, 0.4, 2.0);
	transition:0.3s transform cubic-bezier(0, 0, 0.4, 2.0);
}


.box:hover .box-frame {
	border:10px solid rgba(255,255,255,0.5);
}

.box:hover .box-frame {
	border:10px solid rgba(255,255,255,0.5);
}

.box:hover .box-square {
    -webkit-transform: scale(1.0,1.0) rotate(360deg);
	-moz-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
}

/* Translate css */

#container {
	position:relative;
	margin:70px auto;
	width:75%;
	border:1px solid #fff;
}

#block {
	width:100px;
	height:35px;
	background:#55DD6C;
	-webkit-transform:translate(-30px,0px);
	transform:translate(-30px,0);
	-webkit-transition:0.5s -webkit-transform ease;
	-moz-transition:1s -moz-transform ease;
	-ms-transition:1s -ms-transform ease;
	transition:1s transform ease;
}

.btn-row {
	margin-top:200px;
}

.button {
	width:50px;
	height:50px;
	border-radius:25px;
	display:inline-block;
	margin-right:200px;
	margin-bottom:50px;
	background:#0CF;
	-webkit-transition:1s -webkit-transform ease;
	-moz-transition:1s -moz-transform ease;
	-ms-transition:1s -ms-transform ease;
	transition:1s transform ease;
}

.button:hover {
	background:#009;
	cursor:pointer;
}

.button:hover .move {
	-webkit-transform:translate(200px,0px) !important;
}