Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try use :before and :after (ie9+)</p> <pre><code>#wrapper{ width:400px; height:400px; margin:0 auto; border: 1px #000 solid; position:relative;} #wrapper:after, #wrapper:before{ position:absolute; top:0; left:0; width:100%; height:100%; content:''; background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); opacity:1; z-index:-1; -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -ms-transition: all 2s ease-out; -o-transition: all 2s ease-out; transition: all 2s ease-out; } #wrapper:after{ opacity:0; background: #87e0fd; background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); } #wrapper:hover:before{opacity:0;} #wrapper:hover:after{opacity:1;} </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload