Issue
I have a List of six Items which are placed in two rows. Now I would like to create an overlay effect as soon as you hover over one item. The more Tricky part would be I wand to be able to place some text on the overlay which should be positioned on the biggest available part of that overlay. I believe I have to have a class for each item just like the polygons with different positioning.
My Problem: I can't get the overlay done. Right now the polygon on hover are on the content element. I would like to have that on an overlay being on top of the content element so it hides the other elements and set text to it.
var contentElement = document.querySelectorAll("div.content");
var liElements = document.querySelectorAll("li");
liElements.forEach((item, index) => {
item.addEventListener("mouseout", (event) => {
if( item.querySelector('div.text span').innerHTML === 'One' ){
contentElement[0].classList.remove("polyone");
} else if( item.querySelector('div.text span').innerHTML === 'Two' ){
contentElement[0].classList.remove("polytwo");
} else if( item.querySelector('div.text span').innerHTML === 'Three' ){
contentElement[0].classList.remove("polythree");
} else if( item.querySelector('div.text span').innerHTML === 'Four' ){
contentElement[0].classList.remove("polyfour");
} else if( item.querySelector('div.text span').innerHTML === 'Five' ){
contentElement[0].classList.remove("polyfive");
} else if( item.querySelector('div.text span').innerHTML === 'Six' ){
contentElement[0].classList.remove("polysix");
}
});
item.addEventListener("mouseover", (event) => {
if( item.querySelector('div.text span').innerHTML === 'One' ){
if ( !contentElement[0].classList.contains('polyone') ) {
contentElement[0].classList.add("polyone");
}
} else if( item.querySelector('div.text span').innerHTML === 'Two' ){
if ( !contentElement[0].classList.contains('polytwo') ) {
contentElement[0].classList.add("polytwo");
}
} else if( item.querySelector('div.text span').innerHTML === 'Three' ){
if ( !contentElement[0].classList.contains('polythree') ) {
contentElement[0].classList.add("polythree");
}
} else if( item.querySelector('div.text span').innerHTML === 'Four' ){
if ( !contentElement[0].classList.contains('polyfour') ) {
contentElement[0].classList.add("polyfour");
}
} else if( item.querySelector('div.text span').innerHTML === 'Five' ){
if ( !contentElement[0].classList.contains('polyfive') ) {
contentElement[0].classList.add("polyfive");
}
} else if( item.querySelector('div.text span').innerHTML === 'Six' ){
if ( !contentElement[0].classList.contains('polysix') ) {
contentElement[0].classList.add("polysix");
}
}
});
});
div.cutoff {
position: relative;
overflow: hidden;
background-color: gray;
}
div.cutoff:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(100% 100%, 100% 80%, 0 20%); */
clip-path: polygon(0 0, 100% 0, 0 20%);
}
div.cutoff:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(0 0, 100% 0, 0 20%); */
clip-path: polygon(100% 80%, 100% 100%, 0 100%);
}
div.content {
background-color: gray;
margin-top: 10%;
margin-bottom: 10%;
}
div.polyone {
background-color: red;
clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 33% 50%);
}
div.polytwo {
background-color: magenta;
clip-path: polygon(0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
div.polythree {
background-color: cyan;
clip-path: polygon(0 0, 66% 0, 66% 50%, 100% 50%, 100% 100%, 0 100%, 0 0);
}
div.polyfour {
background-color: cyan;
clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 33% 50%, 0 50%);
}
div.polyfive {
background-color: magenta;
clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0 100%);
}
div.polysix {
background-color: red;
clip-path: polygon(0 0, 100% 0, 100% 50%, 66% 50%, 66% 100%, 0 100%);
}
ul {
list-style: none;
padding-inline-start: 0;
}
ul.row {
margin-left: 0;
margin-right: 0;
}
li {
padding: 1rem;
display: inline-block;
}
li div.circle {
background: lime;
border-radius: 50%;
width: 100px;
height: 100px;
margin: auto;
display:flex;
justify-content:center;
align-items:center;
}
li i.icon {
width: 64px;
height: 64px;
display: block;
margin: auto;
}
li div.text {
margin: auto;
display:flex;
justify-content:center;
align-items:center;
}
li:hover {
filter: brightness(40%);
transition: all 0.2s ease-in-out;
background-color: blue;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cutoff">
<div class="content">
<ul class="row">
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>One</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>Two</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>Three</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>Four</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>Five</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0"/>
</svg>
</i>
</div>
<div class="text">
<span>Six</span>
</div>
</li>
</ul>
</div>
</div>
While imgur seems offline: https://ibb.co/rxNNRbM https://ibb.co/pvSjS6K https://ibb.co/zV2jrfc
Update:. At least for prototype purposes this is what I wanted to achieve:
var mask = document.querySelector("div.content .mask");
mask.addEventListener('mouseover', () => {
mask.className = 'mask'
})
document.body.addEventListener('mouseover', e => {
if (e.target.nodeName === 'BODY') mask.className = 'mask'
})
var liElements = document.querySelectorAll("li");
liElements.forEach((item, index) => {
const { innerHTML } = item.querySelector('div.text span')
item.addEventListener("mouseover", () => {
if (innerHTML) {
mask.className = 'mask ' + innerHTML
}
});
});
div.cutoff {
position: relative;
overflow: hidden;
background-color: gray;
}
div.cutoff:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(100% 100%, 100% 80%, 0 20%); */
clip-path: polygon(0 0, 100% 0, 0 20%);
}
div.cutoff:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(0 0, 100% 0, 0 20%); */
clip-path: polygon(100% 80%, 100% 100%, 0 100%);
}
div.content {
margin-top: 10%;
margin-bottom: 10%;
background-color: gray;
}
.mask {
position: absolute;
left: 0;
top: 0;
z-index: -1;
height: 100%;
width: 100%;
display: flex;
font-size: 24px;
justify-content: center;
align-items: center;
opacity: 0.7;
}
.mask.One {
z-index: 1;
background-color: red;
clip-path: polygon(33% 13.5%, 100% 0, 100% 80%, 0 100%, 0 50%, 33% 50%);
padding: 1rem 1rem 1rem 35%;
}
.mask.One:after {
padding: 3rem;
content: "One One OneOne One OneOne One OneOne One OneOne One OneOne One OneOne One OneOne One OneOne One OneOne One";
}
.mask.Two {
z-index: 1;
background-color: magenta;
clip-path: polygon(0 20%, 33% 13.5%, 33% 50%, 66% 50%, 66% 7%, 100% 0, 100% 80%, 0 100%, 0 0);
padding: 15% 1rem 1rem 1rem;
}
.mask.Two:after {
content: "Two Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two TwoTwo Two";
}
.mask.Three {
z-index: 1;
background-color: cyan;
clip-path: polygon(0 0, 66% 0, 66% 50%, 100% 50%, 100% 100%, 0 100%, 0 0);
}
.mask.Four {
z-index: 1;
background-color: cyan;
clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 33% 50%, 0 50%);
}
.mask.Five {
z-index: 1;
background-color: magenta;
clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0 100%);
}
.mask.Six {
z-index: 1;
background-color: red;
clip-path: polygon(0 0, 100% 0, 100% 50%, 66% 50%, 66% 100%, 0 100%);
}
ul {
list-style: none;
padding-inline-start: 0;
}
ul.row {
margin-left: 0;
margin-right: 0;
}
li {
padding: 1rem;
display: inline-block;
}
li div.circle {
background: lime;
border-radius: 50%;
width: 100px;
height: 100px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
li i.icon {
width: 64px;
height: 64px;
display: block;
margin: auto;
}
li div.text {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
li:hover {
filter: brightness(40%);
transition: all 0.2s ease-in-out;
/* background-color: blue; */
}
<div class="cutoff">
<div class="content">
<ul class="row">
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>One</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Two</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Three</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Four</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Five</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Six</span>
</div>
</li>
</ul>
<div class="mask"></div>
</div>
</div>
Solution
Is this what you want? I add a div to create a mask with polygon but not to change the content div like you do,the polygon may need optimize but I think you can do it.
<style>
div.cutoff {
position: relative;
overflow: hidden;
background-color: gray;
}
div.cutoff:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(100% 100%, 100% 80%, 0 20%); */
clip-path: polygon(0 0, 100% 0, 0 20%);
}
div.cutoff:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background-color: white;
/* -webkit-clip-path: polygon(0 0, 100% 0, 0 20%); */
clip-path: polygon(100% 80%, 100% 100%, 0 100%);
}
div.content {
margin-top: 10%;
margin-bottom: 10%;
background-color: gray;
}
.mask {
position: absolute;
left: 0;
top: 0;
z-index: -1;
height: 100%;
width: 100%;
display: flex;
font-size: 24px;
justify-content: center;
align-items: center;
opacity: 0.7;
}
.mask.One {
z-index: 1;
background-color: red;
clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 33% 50%);
}
.mask.Two {
z-index: 1;
background-color: magenta;
clip-path: polygon(0 0, 33% 0, 33% 50%, 66% 50%, 66% 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
.mask.Three {
z-index: 1;
background-color: cyan;
clip-path: polygon(0 0, 66% 0, 66% 50%, 100% 50%, 100% 100%, 0 100%, 0 0);
}
.mask.Four {
z-index: 1;
background-color: cyan;
clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 33% 50%, 0 50%);
}
.mask.Five {
z-index: 1;
background-color: magenta;
clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 66% 50%, 33% 50%, 33% 100%, 0 100%);
}
.mask.Six {
z-index: 1;
background-color: red;
clip-path: polygon(0 0, 100% 0, 100% 50%, 66% 50%, 66% 100%, 0 100%);
}
ul {
list-style: none;
padding-inline-start: 0;
}
ul.row {
margin-left: 0;
margin-right: 0;
}
li {
padding: 1rem;
display: inline-block;
}
li div.circle {
background: lime;
border-radius: 50%;
width: 100px;
height: 100px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
li i.icon {
width: 64px;
height: 64px;
display: block;
margin: auto;
}
li div.text {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
li:hover {
filter: brightness(40%);
transition: all 0.2s ease-in-out;
/* background-color: blue; */
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="cutoff">
<div class="content">
<ul class="row">
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>One</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Two</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Three</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Four</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Five</span>
</div>
</li>
<li class="col-4">
<div class="circle">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
class="bi bi-airplane-engines-fill" viewBox="0 0 16 16">
<path
d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0" />
</svg>
</i>
</div>
<div class="text">
<span>Six</span>
</div>
</li>
</ul>
<div class="mask"><span>This is a mask This is a mask This is a mask This is a mask</span></div>
</div>
</div>
<script>
var mask = document.querySelector("div.content .mask");
mask.addEventListener('mouseover', () => {
mask.className = 'mask'
})
document.body.addEventListener('mouseover', e => {
if (e.target.nodeName === 'BODY') mask.className = 'mask'
})
var liElements = document.querySelectorAll("li");
liElements.forEach((item, index) => {
const { innerHTML } = item.querySelector('div.text span')
item.addEventListener("mouseover", () => {
if (innerHTML) {
mask.className = 'mask ' + innerHTML
}
});
});
</script>
Answered By - moon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.