body {
    margin: 0;
    padding: 0;
}

.ozadje {
    position: relative;
    background: url(../img/roza.jpg)no-repeat center center;
    background-size: 100vw 83vh;
    width: 100vw;
    height: 83vh;
}

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 5vh;
    display: flex;

}

ul li {
    position: relative;
    list-style: none;
    margin-left: 6%;
    width: 6%;
    height: 100%;
    left: 26%;
    mix-blend-mode: hue;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    
}

ul:hover li {
    opacity: 1; /* prosojnost ko izbereš barvo*/
}

ul li:hover {
    opacity: 1;
}

ul li:nth-child(1) {
    background: red;
}

ul li:nth-child(2) {
    background: green;
}

ul li:nth-child(3) {
    background: blue;
}

ul li:nth-child(4) {
    background: purple;
}

ul li:hover:nth-child(1) {
    box-shadow: 0 0 0 100vh red;
}

ul li:hover:nth-child(2) {
    box-shadow: 0 0 0 100vw green;
    object-fit: cover;
}

ul li:hover:nth-child(3) {
    box-shadow: 0 0 0 100vw blue;
}

ul li:hover:nth-child(4) {
    box-shadow: 0 0 0 100vw purple;
}