<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.