IMAGE HOVER EFFECT USING CSS
An image hover effect using CSS refers to a visual transformation or animation that occurs when a user move their cursor over image.
- CSS means cascading style sheet . It is a stylesheet language used for describing the representation of a document written in HTML OR XML.
- In context of HTML and web development lang refers to an attribute used in HTML.
- In web development a view port refers to the visible area of a web page on the screen.
Program:
main.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Hover Effect</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="image-container"> <img src="image.jpg" alt="Sample Image"> <div class="overlay"></div> </div> </body> </html>
Styles.css:
.image-container { position: relative; width: 300px; /* Adjust as per your image size */ height: 200px; /* Adjust as per your image size */ overflow: hidden; } .image-container img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity/color as needed */ opacity: 0; transition: opacity 0.3s ease; } .image-container:hover img { transform: scale(1.1); /* Adjust scale factor as needed */ } .image-container:hover .overlay { opacity: 1; }