HTML hover effect on images

Here, I'm showing you some HTML codes with hover effects for your images. Simple, but sometimes the little things make a big impact. Don't be shy to ask me, if you need any help.

Feature 1

Effects

		your text here
<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grayscale { filter: grayscale(100%); transition: filter 0.3s ease; } .grayscale:hover { filter: grayscale(0); } </style> </head> <body> <img class="grayscale" src="YOUR IMAGE URL" alt="Bild"> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .shadow-image { width: 100px; transition: box-shadow 0.3s ease; } .shadow-image:hover { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); } </style> </head> <body> <img class="shadow-image" src="YOUR IMAGE URL" alt="Bild"> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .image-wrapper { position: relative; display: inline-block; } .image-wrapper img { width: 100%; display: block; } .image-wrapper .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .image-wrapper:hover .overlay { opacity: 1; } </style> </head> <body> <div class="image-wrapper"> <img src="YOUR IMAGE URL" alt="Bild"> <div class="overlay">YOUR TEXT</div> </div> </body> </html>


<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .image-container { width: 100px; height: 100px; overflow: hidden; position: relative; } .image-container img { width: 100%; transition: transform 0.3s ease; } .image-container:hover img { transform: scale(1.1); } </style> </head> <body> <div class="image-container"> <img src="YOUR IMAGE URL" alt="Bild"> </div> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .color-change { width: 100px; transition: filter 0.5s ease; } .color-change:hover { filter: sepia(100%) hue-rotate(180deg); } </style> </head> <body> <img class="color-change" src="YOUR IMAGE URL" alt="Bild"> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .shake { display: inline-block; transition: transform 0.2s ease; } .shake:hover { animation: shake 0.5s; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } } </style> </head> <body> <img class="shake" src="YOUR IMAGE URL" alt="Bild"> </body> </html>

		floating text
<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .zoom-shadow { width: 100px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .zoom-shadow:hover { transform: scale(1.2); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } </style> </head> <body> <img class="zoom-shadow" src="YOUR IMAGE URL" alt="Bild"> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .rotate-effect { perspective: 100px; width: 100px; height: 100px; } .rotate-effect img { width: 100%; height: 100%; transition: transform 0.3s ease; transform-origin: center; } .rotate-effect:hover img { transform: rotateY(15deg); } </style> </head> <body> <div class="rotate-effect"> <img src="YOUR IMAGE URL" alt="Bild"> </div> </body> </html>	<html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .hover-effect { position: relative; width: 300px; transition: transform 0.3s ease; } .hover-effect:hover { transform: translateY(-10px); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); } .hover-effect .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #979797; font-size: 24px; opacity: 0; transition: opacity 0.3s ease; } .hover-effect:hover .text { opacity: 1; } </style> </head> <body> <div class="hover-effect"> <img src="YOUR IMAGE URL" alt="Bild"> <div class="text">YOUR TEXT</div> </div> </body> </html>