<div class="metal">
  <div><div>
  </div></div>
</div>

.metal {
		margin: 0 auto;
		text-align: center;
		width: 150px;
		height: 150px;
		border-radius: 45px;
		position: relative;
		background: rgb(171,136,82); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(171,136,82,1) 0%, rgba(251,227,190,1) 40%, rgba(251,227,190,1) 60%, rgba(171,136,82,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(171,136,82,1)), color-stop(40%,rgba(251,227,190,1)), color-stop(60%,rgba(251,227,190,1)), color-stop(100%,rgba(171,136,82,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab8852', endColorstr='#ab8852',GradientType=1 ); /* IE6-9 */
		transition:All 0.3s ease-in-out;
		-webkit-transition:All 0.3s ease-in-out;
		-moz-transition:All 0.3s ease-in-out;
		-o-transition:All 0.3s ease-in-out;
	}
	.metal > div {
		position: absolute;
		top: 15px;
		width: 150px;
		height: 150px;
		border-radius: 45px;
		background: rgb(251,206,136); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(251,206,136,1) 0%, rgba(143,62,17,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,206,136,1)), color-stop(100%,rgba(143,62,17,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbce88', endColorstr='#8f3e11',GradientType=0 ); /* IE6-9 */
		box-shadow: inset 0px 3px 10px 1px rgba(255,255,255,0.2), 0 -5px 10px rgba(255,255,255,0.3);
		transition:All 0.3s ease-in-out;
		-webkit-transition:All 0.3s ease-in-out;
		-moz-transition:All 0.3s ease-in-out;
		-o-transition:All 0.3s ease-in-out;
	}
	.metal > div > div {
		position: absolute;
		top: 8px;
		left: 8px;
		margin-top: 15px;
		width: 135px;
		height: 135px;
		border-radius: 45px;
		background: url(isto.jpg);
		margin: auto;
		background-size: auto 100%;
		box-shadow:
    inset 0px 20px 30px 0px rgba(0,0,0,0.3),
    inset 0px -10px 1px 0px rgba(143,62,17,0.9),
    inset 0px -5px 3px 0px rgba(0,0,0,0.9);
		transition:All 0.3s ease-in-out;
		-webkit-transition:All 0.3s ease-in-out;
		-moz-transition:All 0.3s ease-in-out;
		-o-transition:All 0.3s ease-in-out;		
	}
	.metal:hover {
		background-position: -150px;
	}
	.metal > div:hover {
		background-position: 0 150px;
	}
	.metal > div > div:hover {
		box-shadow: inset 0px 0px 30px 5px rgba(255,255,255,0.5);
	}