Home JAVASCRIPT Create Image Filter With Hover VIEWS

Create Image Filter With Hover

Read

Create Image Filter With Hover

Hello freinds, this tutorial discusses how to create an effect on an image when a cursor is highlighted with a label in it.

Well just start our code, first open your text editor, and here I use Sublime and enter the following code

<html>
<head>
 <title>Hover Image With Effect</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #262626;
  font-family: arial;
  color: #666;
}

.container {
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: 40px auto;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 20px #000;
}

.container img {
  height: 100%;
  transform: scale(1.2);
  filter: grayscale(100%);
  transition: .7s ease-in-out;
}

.container .text {
  width: 100%;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 0;
  transform: rotateX(90deg) perspective(100px);    
  background-color: #fff;
  transform-origin: bottom;
  transition: .7s ease-in-out;
}

.container ul {
  list-style: none;
  text-align: center;
  position: absolute;
  top: 0;
}

.container ul li {
  background-color: #FFF;
  width: 30px;
  border-bottom: 1px solid #999;
  padding: 5px;
  transform: rotatey(-90deg) perspective(100px);
  transform-origin: left;
  cursor: pointer;
  transition: .5s ease-in-out;
}

.container ul li:first-of-type {
  transition-delay: .5s;
}

.container ul li:nth-of-type(2) {
  transition-delay: 1s;
}

.container ul li:last-of-type {
  transition-delay: 1.5s;
}

.skewd {
  background-color: rgb(255, 255, 255);
  opacity: .4;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: skewX(45deg);
  top: 0;
  right: -170%;
  z-index: 1;
  transition: 1s ease-in-out;
}

.container:hover img {
  filter: grayscale(0);
  transform: scale(1);
}

.container:hover .text {
  transform: rotateX(0deg);
}

.container ul li:hover {
  color: #000;
}

.container:hover ul li {
  transform: rotatey(0deg);
}

.container:hover .skewd {
  right: 170%;
  transition-delay: 2s;
}

.white-mode {
  text-decoration: none;
  padding: 7px 10px;
  background-color: #122;
  border-radius: 3px;
  color: #FFF;
  transition: .35s ease-in-out;
  position: absolute;
  left: 15px;
  bottom: 15px;
 
}

.white-mode:hover {
  background-color: #FFF;
  color: #122;
}

</style>
</head>
<body>
<div class="container">
  <img src="pc.jpeg" />
  <div class="text">AWESOME SETUP FOR DEVELOPER</div>
</div>
</body>
</html>

NOTES :

Make sure the image you set is in a folder with the .HTML file from the above code

MORE ARTICLE

Create Zoom Image Detail HTML

For more details, please watch the video below