SHARE
TWEET

Untitled

a guest Oct 21st, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.   * {
  2.             margin: 0;
  3.             padding: 0;
  4.         }
  5.  
  6.         .red.circle {
  7.             position: absolute;
  8.             top: 0;
  9.             left 0;
  10.             width: 50px;
  11.             height: 50px;
  12.             background-color: red;
  13.             border-radius: 50%;
  14.             border: solid 2px white;
  15.             margin: 20px;
  16.             z-index: 1;
  17.  
  18.         }
  19.  
  20.  
  21.  
  22.         .green.circle {
  23.             position: absolute;
  24.             top: 0;
  25.             right: 0;
  26.             width: 50px;
  27.             height: 50px;
  28.             background-color: green;
  29.             border-radius: 50%;
  30.             border: solid 2px white;
  31.             margin: 20px;
  32.             z-index: 1;
  33.         }
  34.  
  35.         .blue.circle {
  36.             position: absolute;
  37.             bottom: 0;
  38.             left 0;
  39.             width: 50px;
  40.             height: 50px;
  41.             background-color: blue;
  42.             border-radius: 50%;
  43.             border: solid 2px white;
  44.             margin: 20px;
  45.             z-index: 1;
  46.         }
  47.  
  48.         .orange.circle {
  49.             position: absolute;
  50.             bottom: 0;
  51.             right: 0;
  52.             width: 50px;
  53.             height: 50px;
  54.             background-color: orange;
  55.             border-radius: 50%;
  56.             border: solid 2px white;
  57.             margin: 20px;
  58.             z-index: 1;
  59.         }
  60.  
  61.         p {
  62.             text-align: center;
  63.             line-height: 100vh;
  64.             position: absolute;
  65.             width: 100%;
  66.             height: 100%;
  67.  
  68.         }
  69.  
  70.         .red {
  71.             background-color: red;
  72.             z-index: -1;
  73.         }
  74.  
  75.         .green {
  76.             background-color: green;
  77.             z-index: -1;
  78.  
  79.         }
  80.  
  81.         .blue {
  82.             background-color: blue;
  83.             z-index: -1;
  84.  
  85.         }
  86.  
  87.         .orange {
  88.             background-color: orange;
  89.             z-index: -1;
  90.  
  91.         }
  92.  
  93.         .bg {
  94.             background-color: grey;
  95.             width: 100vw;
  96.             height: 100vh;
  97.             z-index: 1;
  98.         }
  99.  
  100.  
  101.  
  102.  
  103.  
  104.         .orange.circle:hover~.bg {
  105.             background-color: transparent;
  106.  
  107.         }
  108.  
  109.  
  110.         .red.circle:hover~.bg,
  111.         .green.circle:hover~.bg,
  112.         .blue.circle:hover~.bg,
  113.         .orange.circle:hover~.bg {
  114.             background-color: transparent;
  115.         }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top