Skip to main content

Archive

Show more

Image Overlay Effect On Hover | HTML And CSS

by Rustcode
Image-Overlay-Effect-On-Hover -HTML-And-CSS

Image Overlay Effect On Hover Using HTML And CSS

"Image overlay effect" is the common and most useful effect. Because every website have images and it show additional information of that image or show something which is related to that image. There are many animations available for overlays. But in this article, it's a simple overlay from left to right.

If we break this animation into small steps then we can understand it easily. Initially, you have a simple image. When you hover over it, a slide appears from left to right, after you move the mouse from the image the overlay goes back to normal. We've added an additional effect which is opacity to keep the overlay layer transparent.

You can check out our playlist "Effect on Image".

You can learn more responsive design from our youtube channel, we made a playlist there.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Image Overlay Effect On Hover</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Image Overlay Effect On Hover</title>
  </head>
  <body>
    <div class="container">
      <img src="https://images.unsplash.com/photo-1570739193408-06ef09ded9dd" />
      <div class="overlay"></div>
    </div>
  </body>
</html>



03. CSS

body {
  margin: 0px;
  padding: 0px;
  background-color: rgb( 0, 204, 153);
}

.container {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  border-radius: 6px;
}

.container img {
  width: 300px;
  height: 500px;
  border-radius: 6px;
  box-shadow: 2px 2px 24px #000;
}

.container .overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 0%;
  height: 100%;
  z-index: 1;
  border-radius: 6px;
  background: rgba(40, 40, 40, .6);
  transition: all .8s ease-in-out;
}

.container:hover .overlay {
  width: 100%;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment