<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery ... gt%3B
<style>
*{
box-sizing: border-box;
}
.iconList{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
color: #000;
border-radius: 50%;
background-color: #fff;
box-shadow:0px 0px 8px rgba(0, 0, 0, .1);
transition: all ease-in 300ms;
}
.icon:nth-child(1):hover{
color: red;
}
.icon:nth-child(2):hover{
color: blue;
}
.icon:nth-child(3):hover{
color: green;
}
.icon .maskBox{
--IconUrl: "";
width: fit-content;
color: currentColor;
background: currentColor;
-webkit-mask: var(--IconUrl);
mask: var(--IconUrl);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
.icon img {
opacity: 0;
}
</style>
</head>
<body>
<div class="iconList">
<div class="icon">
<div class="maskBox">
<img src="./icon.png" alt="">
</div>
</div>
<div class="icon">
<div class="maskBox">
<img src="./icon.png" alt="">
</div>
</div>
<div class="icon">
<div class="maskBox">
<img src="./icon.png" alt="">
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".iconList .icon").each(function () {
let maskBox = $(this).find(".maskBox");
let IconUrl = maskBox.find("img").attr("src");
maskBox.css("--IconUrl", `url(${IconUrl})`);
})
});
</script>
</body>
</html>
