<div class="grid-container">

<div class="grid-item photo1">

<img class="filter-image" src="https://source.unsplash.com/random/?city,night,neon">

</div>

<div class="grid-item photo2">

<img class="filter-image" src="https://source.unsplash.com/random/?car,night">

</div>

<div class="grid-item photo3">

<img class="filter-image" src="https://source.unsplash.com/random/?beach,skynight,dark">

</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>

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);

}