ابتدا صفحه html با کدهای زیر ایجاد میکنیم
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<ul>
<li>
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
<img src="images/moz.png" >
</label>
</li>
<li>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
<img src="images/chrome.png" >
</label>
</li>
<li>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
<img src="images/face.jpg" >
</label>
</li>
</ul>
</body>
</html>
سپس فایل css به نام mycss.css ایجاد کنید و محتویات آنرا با توجه به کدهای زیر درج کنید.
ul{
list-style-type: none;
}
li{
display: inline-block;
}
input[type="checkbox"][id^="myCheckbox"]{
display: none;
}
label{
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label::before{
background-color: white;
color: white;
content: "";
display: block;
border-radius: 50%;
border: 1px solid gray;
position:absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img{
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label{
border-color: #ddd;
content: "";
}
:checked + label::before{
content: "✓";
background-color: gray;
transform: scale(1);
}
:checked + label img{
transform: scale(0.9);
z-index: -1;
}