Advertisement
UnlimitedSupply

Popcorn hover CSS

Jun 19th, 2022
367
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.10 KB | None | 0 0
  1. body {
  2.     text-align: center;
  3.     background-color: black;
  4. }
  5. #frame { /*  Video/gif frame | main frame  */
  6.     position: relative;
  7.     left: 42%;
  8.     width:220px;
  9.     height: 165px;
  10.     background-color: white;
  11. }
  12. #frame img, #frame div {
  13.     position: absolute;
  14.     left: 0px;
  15. }
  16. #box {
  17.     width:100%;
  18.     height: 100%;
  19.     background-color: rgb(255,0,0);
  20.     border-color: rgb(240,0,0);
  21.     opacity: 1;
  22. }
  23. #box:hover, #box:hover #triangle {
  24.     opacity: 0;
  25. }
  26. #top {
  27.     width: 96px;
  28.     height: 25px;
  29.     background-color: rgb(255,255,255);
  30.     transform: rotate(25deg);
  31.     margin: 48px 0px 0px 76px;
  32.     border-radius: 30%;
  33. }
  34. #bottom {
  35.     width: 97px;
  36.     height: 25px;
  37.     background-color: rgb(255,255,255);
  38.     transform: rotate(-25deg);
  39.     margin: 80.5px 0px 0px 75px;
  40.     border-radius: 30%;
  41. }
  42. #left {
  43.     width: 25px;
  44.     height: 82.5px;
  45.     background-color: rgb(255,255,255);
  46.     margin: 36.2px 0px 0px 75px;
  47.     border-radius: 30%;
  48. }
  49. #middle {
  50.     width:55px;
  51.     height: 50px;
  52.     background-color: rgb(255,255,255);
  53.     margin-top:50px;
  54.     margin-left:77px;
  55. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement