[해피CGI][cgimall] Animated SVG filter

이미지가 흐려지게되는 애니메이션 효과로
마우스를 이미지에 올리게 되면 원본 이미지가 보이는 디자인 입니다.

자세한 내용은 데모사이트 주소에서 확인이 가능합니다.

HTML

<div class="grid-container"> <div class="grid-item photo1"> </div> <div class="grid-item photo2"> </div> <div class="grid-item photo3"> </div> </div>   <svg> <defs> <filter id="crumple-effect-1"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.1" numOctaves="5" result="turbulence"> <animate attributeName="baseFrequency" values="0.1;0.3;0.6;1.0" keyTimes="0;0.5;0.75;1" dur="15s" repeatCount="indefinite" /> </feTurbulence> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0"> <animate attributeName="scale" values="0;20;50;100" keyTimes="0;0.5;0.75;1" dur="60s" repeatCount="indefinite" /> </feDisplacementMap> </filter>   <filter id="crumple-effect-2"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.02" numOctaves="5" result="turbulence"> <animate attributeName="baseFrequency" values="0.1;0.2" keyTimes="0;1" dur="10s" repeatCount="indefinite" /> </feTurbulence> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0"> <animate attributeName="scale" values="30;60" keyTimes="0;1" dur="10s" repeatCount="indefinite" /> </feDisplacementMap> </filter>   <filter id="crumple-effect-3"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.02" numOctaves="5" result="turbulence"> <animate attributeName="baseFrequency" values="0.6;0.3;0.2;0.1" keyTimes="0;0.5;0.75;1" dur="15s" repeatCount="indefinite" /> </feTurbulence> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0"> <animate attributeName="scale" values="0;50;75;100" keyTimes="0;0.5;0.75;1" dur="60s" repeatCount="indefinite" /> </feDisplacementMap> </filter>   </defs> </svg>

 

CSS

body { height: 100vh; margin: 0; place-items: center; background-color: aliceblue; }   .grid-container {   display: grid;   gap: 20px 20px;   grid-template-columns: auto auto auto; }   .grid-item {   padding: 20px; }   .filter-image {   text-align: center; width: 30vw; height: 80vh; object-fit: cover; background: white; padding: 10px 10px 35px; text-align: center; text-decoration: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: all 0.15s linear; z-index: 0; position: relative; transform: rotate(4deg); }   .photo1, photo2 { padding: 1rem; filter: drop-shadow(0 2px 1px darkgrey); display: inline-block; }   .photo1 { filter: url(#crumple-effect-1); }   .photo2 { filter: url(#crumple-effect-2); }   .photo3 { filter: url(#crumple-effect-3); }     .photo1:hover, .photo2:hover, .photo3:hover { filter: sepia(50%); transform: rotate(-6deg); }