All muhaza's note in developing website. Front-end & uiux method. Real life implementation for webdesigner.
Thursday, 22 May 2025
Hover overlay on card or any image
<//style>
.card {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
}
.card img {
width: 100%;
height: 100%;
display: block;
}
.card .overlay {
position: absolute;
top: 10%; /*change position of circle start */
right: 0;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.6s ease-in-out;
transform-origin: right center;
z-index: 1;
}
.card:hover .overlay {
transform: translateY(-50%) scale(500); /* Big enough to cover image */
}
<//style>
<div class="card">
<img alt="Card Image" src="https://via.placeholder.com/300x200" />
<div class="overlay"></div>
</div>
SEO: Trik Terbaik
Lebih 30 Trik Carian Google untuk SEO GraphicLab Gunakan kombinasi carian ini untuk: Mengesan sebutan jenama Mencari peluang backli...
-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 < div style = "background-color:#D94A38;width:170px;height:80px;ma...
-
/* for Big PC & Display */ @media only screen and ( min-width : 1900px ) { .tps-section { height : 1080px ; ...