Thursday, 22 May 2025

https://jsfiddle.net/muhazastudio/sxpry723/22/

https://jsfiddle.net/muhazastudio/sxpry723/22/

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>


example
Card Image

CSS for next project

https://htmlstream.com

SEO: Trik Terbaik

Lebih 30 Trik Carian Google untuk SEO GraphicLab Gunakan kombinasi carian ini untuk: Mengesan sebutan jenama Mencari peluang backli...