11 সিএসএস ইমেজ হোভারিং এর জন্য প্রভাব

<style>
.cont1 {
overflow:hidden;
}
.cont1:hover .image1 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image1 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>

<div class="cont1">
<img class="image1" src="Image-URL">
</div>

<style>
.cont2 {
overflow:hidden;
}
.cont2:hover .image2 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>

<div class="cont2">
<img class="image2" src="Image-URL">
</div>

<style>
.image3 {
 -webkit-transition: all 0.7s ease;
 transition: all 0.7s ease;
} 
.image3:hover {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>

<img class="image3" src="Image-URL">

<style>
.image4 {
 -webkit-transition: all 0.7s ease;
 transition: all 0.7s ease;
} 

.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}
</style>

<img class="image4" src="Image-URL">

<style>
.image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image5:hover {
-webkit-filter: saturate(4);
}
</style>

<img class="image5" src="Image-URL">

<style>
.image6 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image6:hover {
-webkit-filter: grayscale(100%);
}
</style>

<img class="image6" src="Image-URL">

<style>
.image7 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image7:hover {
-webkit-filter: contrast(160%);
}
</style>

<img class="image7" src="Image-URL">

<style>
.image8 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image8:hover {
-webkit-filter: brightness(0.25);
}
</style>

<img class="image8" src="Image-URL">

<style>
.image9 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image9:hover {
-webkit-filter: blur(5px);
}
</style>

<img class="image9" src="Image-URL">

<style>
.image10 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image10:hover {
-webkit-filter: invert(100%);
}
</style>

<img class="image10" src="Image-URL">

<style>
.image11 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.image11:hover {
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<img class="image11" src="Image-URL">