Hover effects

Hover effects

by Csaba Hellinger

HTML

<div>
  <img src="https://fe023362.customer.static.dev.core.one.accedo.tv/fe0233621cad4b55/image/item/familyGenreManual/logo/square/01frjpcccc7qgjpq6xtwwkm253?locale=en" />
  <img src="https://fe023362.customer.static.dev.core.one.accedo.tv/fe0233621cad4b55/image/item/familyGenreManual/logo/square/01frjpcccc7qgjpq6xtwwkm253?locale=en" />
  <img src="https://fe023362.customer.static.dev.core.one.accedo.tv/fe0233621cad4b55/image/item/familyGenreManual/logo/square/01frjpcccc7qgjpq6xtwwkm253?locale=en" />
</div>

<svg>
  <filter id="custom-drop-shadow">
    <feOffset in="SourceGraphic" dx="10" dy="-10" out="moved"></feOffset>

    


    <feMerge>
      <feMergeNode />
      <feMergeNode in="moved" />
    </feMerge>
  </filter>
</svg>

CSS

div {
  background: gray;
  overflow: hidden;
  display: flex;
}

img {
  width: 200px;
  transition-property: filter, transform;
  transition-duration: 150ms;
}

img:hover {
  filter: brightness(1.05) contrast(1.1) drop-shadow(0 0 0.5rem #0006);
  transform: scale(1.01);
  /* filter: url(#custom-drop-shadow); */
}