Mirror image

stupid mirror image

by zerrax

HTML

<div class="mirror_top">

</div>
<div class="mirror_bot">

</div>

CSS

body{
  background:#000;
}
.mirror_top{
 position:relative;
  width:100%;
  height: 180px;
  display:flex;
    
    background: url('https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg') no-repeat center;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; 

}

  .mirror_bot{
  position:relative;
  width:100%;
  height: 180px;
  display:flex;
    background: url('https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg') no-repeat center ;
   transform: scaleY(-1);
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; 
}
.mirror_bot:after{
   //  transform: scaleY(-1);

    content: "";
  position: absolute;
  top:0;
  bottom:0;
width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&1+0,0.9+60,0.7+70,0.5+80,0.3+90,0.1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */
}