Image hover effect using css and html PHPCODER.TECH

Hello Coders, two I will show you some interesting with CSS and HTML, which you want to see sometimes on your mind. So I hope you guys are like it. Let’s start,

First we create a .html file named,

ColorChange.html

<!DOCTYPE html>
<html>
<head>
<title>Color Change</title>
<link rel="stylesheet" type="text/css" href="colorchange.css">
</head>
<body>
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Color Change</title>

</head>

<body>

<ul>

</ul>

</section>

</body>

</html>

Now check the main part which is CSS, if you want you can scrap the image from my site, check below

Colorchange.css

body
{
margin: 0;
padding: 0;
}
section{
height: calc(100vh - 50px);
background: url(mahindra.jpg);
}
ul{
position: absolute;
bottom:0;
left: 0;
margin: 0;
padding: 0;
background:#f00;
width: 100%;
height: 50px;
display: flex;
}
ul li{
position: relative;
list-style: none;
width: 20%;
height: 100%;
mix-blend-mode: hue;
}
ul:hover li{
opacity: 0;
}
ul li:hover{
opacity: 1;
}
ul li:nth-child(1)
{
background:#FF5500;
}
ul li:nth-child(2)
{
background:#5500FF;
}
ul li:nth-child(3)
{
background:#00b3b3;
}
ul li:nth-child(4)
{
background:#44cc00;
}
ul li:nth-child(5)
{
background:#e645a0;
}
ul li:hover:nth-child(1)
{
box-shadow: 0 0 0 1500px #FF5500;
}
ul li:hover:nth-child(2)
{
box-shadow: 0 0 0 1500px #5500FF;
}
ul li:hover:nth-child(3)
{
box-shadow: 0 0 0 1500px #00b3b3;
}
ul li:hover:nth-child(4)
{
box-shadow: 0 0 0 1500px #44cc00;
}
ul li:hover:nth-child(5)
{
box-shadow: 0 0 0 1500px #e645a0;
}

body

{

margin: 0;

padding: 0;

}

section{

height: calc(100vh - 50px);

background: url(mahindra.jpg);

}

ul{

position: absolute;

bottom:0;

left: 0;

margin: 0;

padding: 0;

background:#f00;

width: 100%;

height: 50px;

display: flex;

}

ul li{

position: relative;

list-style: none;

width: 20%;

height: 100%;

mix-blend-mode: hue;

}

ul:hover li{

opacity: 0;

}

ul li:hover{

opacity: 1;

}

ul li:nth-child(1)

{

background:#FF5500;

}

ul li:nth-child(2)

{

background:#5500FF;

}

ul li:nth-child(3)

{

background:#00b3b3;

}

ul li:nth-child(4)

{

background:#44cc00;

}

ul li:nth-child(5)

{

background:#e645a0;

}

ul li:hover:nth-child(1)

{

box-shadow: 0 0 0 1500px #FF5500;

}

ul li:hover:nth-child(2)

{

box-shadow: 0 0 0 1500px #5500FF;

}

ul li:hover:nth-child(3)

{

box-shadow: 0 0 0 1500px #00b3b3;

}

ul li:hover:nth-child(4)

{

box-shadow: 0 0 0 1500px #44cc00;

}

ul li:hover:nth-child(5)

{

box-shadow: 0 0 0 1500px #e645a0;

}

Check out live on above and write something if you like or any imrovements.

Happy Coding..!

Was this article helpful?

YesNo

Image hover effect- fill color on image using CSS and HTML

ColorChange.html

Colorchange.css

Related

Written by Bikash

JavaScript if else Statement: Detailed Article

How to use comments in HTML With Example

Bootstrap Datepicker- Complete Solution to Integrate

One Reply to “Image hover effect- fill color on image using CSS and HTML”

Leave a Reply Cancel reply