Popcorn hover CSS

body {
    text-align: center;
    background-color: black;
}
#frame { /*  Video/gif frame | main frame  */
    position: relative;
    left: 42%;
    width:220px;
    height: 165px;
    background-color: white;
}
#frame img, #frame div {
    position: absolute;
    left: 0px;
}
#box {
    width:100%;
    height: 100%;
    background-color: rgb(255,0,0);
    border-color: rgb(240,0,0);
    opacity: 1;
}
#box:hover, #box:hover #triangle {
    opacity: 0;
}
#top {
    width: 96px;
    height: 25px;
    background-color: rgb(255,255,255);
    transform: rotate(25deg);
    margin: 48px 0px 0px 76px;
    border-radius: 30%;
}
#bottom {
    width: 97px;
    height: 25px;
    background-color: rgb(255,255,255);
    transform: rotate(-25deg);
    margin: 80.5px 0px 0px 75px;
    border-radius: 30%;
}
#left {
    width: 25px;
    height: 82.5px;
    background-color: rgb(255,255,255);
    margin: 36.2px 0px 0px 75px;
    border-radius: 30%;
}
#middle {
    width:55px;
    height: 50px;
    background-color: rgb(255,255,255);
    margin-top:50px;
    margin-left:77px;
}