body,html{height:100%;margin:0;padding:0}html{background:#f1f1f1}

body {
background: #3e3e6e; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ffeaab 7%, #ffeaab 28%, #0000ff 85%, #0000ff 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(7%,#ffeaab), color-stop(28%,#ffeaab), color-stop(85%,#020283), color-stop(100%,#00004b)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #ffeaab 7%,#ffeaab 28%,#0000ff 85%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #ffeaab 7%,#ffeaab 28%,#0000ff 85%,#0000ff 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #ffeaab 7%,#ffeaab 28%,#0000ff 85%,#0000ff 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #ffeaab 7%,#ffeaab 28%,#0000ff 85%,#0000ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3e6e', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  display: flex;
  justify-content: center;
  align-items: center;
}

.img {
    margin: 25px;
    opacity: 0.8;
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
.img:hover {
    opacity: 1;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}