پیشنمایش زنده
کد HTML
<div class="card">
<div class="paleta">
<div class="circle">
<div class="component">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-palette"
viewBox="0 0 16 16"
>
<path
d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
></path>
<path
d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
></path>
</svg>
</div>
</div>
<div class="cores cor1">
<div class="div1"><span class="func">Hover me</span></div>
<div class="div2">
<div class="component">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-palette"
viewBox="0 0 16 16"
>
<path
d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
></path>
<path
d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
></path>
</svg>
</div>
</div>
<div class="nome">0E3746</div>
</div>
<div class="cores cor2">
<div class="div3"></div>
<div class="div4">
<div class="component">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-palette"
viewBox="0 0 16 16"
>
<path
d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
></path>
<path
d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
></path>
</svg>
</div>
</div>
<div class="nome">EAE8DC</div>
</div>
<div class="cores cor3">
<div class="div5"></div>
<div class="div6">
<div class="component">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-palette"
viewBox="0 0 16 16"
>
<path
d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
></path>
<path
d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
></path>
</svg>
</div>
</div>
<div class="nome">F4F2EC</div>
</div>
<div class="cores cor4">
<div class="div7"></div>
<div class="div8">
<div class="component">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
class="bi bi-palette"
viewBox="0 0 16 16"
>
<path
d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
></path>
<path
d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
></path>
</svg>
</div>
</div>
<div class="nome">BE2623</div>
</div>
</div>
</div>
کد CSS
.card {
width: 320px;
height: 220px;
perspective: 1000px;
background: #fff;
border-radius: 10px;
box-shadow: 1px 1px 20px #c7c7c7;
}
.card .paleta {
width: 100%;
height: 180px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.component {
height: 23px;
}
.card .paleta .cores {
width: 80px;
height: 180px;
cursor: pointer;
transition: 0.3s linear;
overflow: hidden;
}
.card .paleta .cores:hover {
width: 120px;
transition: 0.4s linear;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -60px;
box-shadow: 1px 1px 8px #c7c7c7;
display: flex;
align-items: center;
justify-content: center;
}
.card .paleta .cor1 {
background-color: #0e3746;
border-radius: 0px 0px 0px 10px;
}
.card .paleta .cor2 {
background-color: #eae8dc;
}
.card .paleta .cor3 {
background-color: #f4f2ec;
}
.card .paleta .cor4 {
background-color: #be2623;
border-radius: 0px 0px 10px 0px;
}
.card .paleta .cores .nome {
width: 100%;
height: 30px;
background-color: #fff;
text-align: center;
font-size: 11px;
font-family: Roboto, sans-serif;
font-weight: 550;
}
.card .paleta .func {
width: 100px;
display: block;
transform: rotate(-90deg);
position: absolute;
bottom: 40px;
margin-left: -41px;
padding-left: 5px;
color: #fff;
font-size: 15px;
font-family: sans-serif;
font-weight: 500;
}
.div1 {
cursor: pointer;
transition: background-color 0.3s;
position: absolute;
bottom: 0;
width: 80px;
height: 150px;
}
.div2 {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -60px;
left: 135px;
box-shadow: 1px 1px 8px #c7c7c7;
align-items: center;
justify-content: center;
display: none;
}
.div1:hover + .div2 {
background-color: #0e3746;
display: flex;
color: #fff;
animation: cssAnimation_0 1512ms 1 ease-out;
}
.div3 {
cursor: pointer;
transition: background-color 0.3s;
position: absolute;
bottom: 0;
width: 80px;
height: 150px;
}
.div4 {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -60px;
left: 135px;
box-shadow: 1px 1px 8px #c7c7c7;
align-items: center;
justify-content: center;
display: none;
}
.div3:hover + .div4 {
background-color: #eae8dc;
display: flex;
color: #fff;
animation: cssAnimation_0 1512ms 1 ease-out;
}
.div5 {
cursor: pointer;
transition: background-color 0.3s;
position: absolute;
bottom: 0;
width: 80px;
height: 150px;
}
.div6 {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -60px;
left: 135px;
box-shadow: 1px 1px 8px #c7c7c7;
align-items: center;
justify-content: center;
display: none;
}
.div5:hover + .div6 {
background-color: #f4f2ec;
display: flex;
color: #fff;
animation: cssAnimation_0 1512ms 1 ease-out;
}
.div7 {
cursor: pointer;
transition: background-color 0.3s;
position: absolute;
bottom: 0;
width: 80px;
height: 150px;
}
.div8 {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -60px;
left: 135px;
box-shadow: 1px 1px 8px #c7c7c7;
align-items: center;
justify-content: center;
display: none;
}
.div7:hover + .div8 {
background-color: #be2623;
display: flex;
color: #fff;
animation: cssAnimation_0 1512ms 1 ease-out;
}
@keyframes cssAnimation_0 {
to {
transform: rotate(360deg) translate(0px, 0px);
}
}