​

#flower{

          position:relative;

          top:-600px;

          left:50px;

          z-index:1;

        }

​

      #front {

          z-index:2;

          position:relative;

          top:100px;

          height:600px;

          width:100%;

          background-color:lightblue;   

        }

​

       #flower{

          filter: url("data:image/svg+xml;utf8,<svg     xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");

          filter: gray;

          -webkit-filter: grayscale(100%);

          -moz-transition: all 0.5s ease-in-out;

          -webkit-transition: all 0.5s ease-in-out;

          transition: all 0.5s ease-in-out;

        }

​

        #flower:hover {

           filter: none;

           -webkit-filter: grayscale(0%);

        }