Image hover

Developer
EOS
Size
2,305 Kb
Views
6,072
  1. Image hover Previews
  2. Image hover HTML Codes
  3. Image hover CSS Codes

How do I make an image hover?

What is a image hover? How do you make a image hover? This script and codes were developed by EOS on 09 January 2023, Monday.

Image hover Previews
IQ Test

Image hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>image hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grow pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/blogger/-oKUqT6j88qg/T8gSyDWU9_I/AAAAAAAASFA/AzmzM4HKAvk/s1600/Botanical-Printable-GraphicsFairy22sm.jpg"/>
</div>
<div class="shrink pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/2013/03/Vintage-Printable-Botanical-Floral-GraphicsFairysm.jpg"/>
</div>
<div class="morph pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/blogger/_CarNcodpCMA/RvmOjyTYNXI/AAAAAAAAAZE/1Mq_XWR96iA/s1600/wallpaper004.jpg" >
</div>
<div class="focus pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/blogger/_CarNcodpCMA/R_AQ-R_6pDI/AAAAAAAABFc/Kar2likNPLw/s1600/1bbybluwallpaper005.jpg"> </div>
<div class="blur pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/blogger/-wA1o70IhRcw/UDkWdAIXc9I/AAAAAAAAVAo/XlcdMXb6r00/s400/YellowRose-Vintage-GraphicsFairy.jpg"/>
</div>
<div class="bw pic"> <img src="http://thegraphicsfairy.com/wp-content/uploads/blogger/_CarNcodpCMA/S0vi8TVb7FI/AAAAAAAAFuw/mvaoS4NJCnc/s400/floralwreathcolor.jpg">
</div>
<div class="footer"><a class="backlink" href="http://thegraphicsfairy.com//" target="_blank">Thanks to Graphics fairy for the images!</a> </div>
</body>
</html>

Image hover - Script Codes CSS Codes

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
body { background: lightsteelblue;
}
.pic { float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden;
}
/*GROW*/
.grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.grow img:hover { width: 400px; height: 400px;
}
/*SHRINK*/
.shrink img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.shrink img:hover { width: 300px; height: 300px;
}
/*MORPH*/
.morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
}
.morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}
/*FOCUS*/
.focus { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.focus:hover { border: 70px solid lightblue; border-radius: 50%;
}
/*BLUR*/
.blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.blur img:hover { -webkit-filter: blur(5px);
}
/*B&W*/
.bw { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
.bw:hover { -webkit-filter: grayscale(100%);
}
.footer { clear:both; background-color:cadetblue; padding:20px; font-family: Arial; font-size:10px; text-align: center;
}
.backlink { color:lavender; text-decoration:none;
}
.backlink:hover { color:pink;
}
Image hover - Script Codes
Image hover - Script Codes
Home Page Home
Developer EOS
Username aurumlux
Uploaded January 09, 2023
Rating 3
Size 2,305 Kb
Views 6,072
Do you need developer help for Image hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

EOS (aurumlux) Script Codes
Name
STELLA
Banner navigation
Css Triangles
A Pen by EOS
ZIRKUS
FLOWER HOVER
CIRCLE
HEXAGON
Tooltip
Color Gradients
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!