IMAGE HOVER EFFECT USING CSS

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

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top