Image Hover effect

Developer
Hans Engebretsen
Size
3,496 Kb
Views
38,456
  1. Image Hover effect Previews
  2. Image Hover effect HTML Codes
  3. Image Hover effect CSS Codes

How do I make an image hover effect?

CSS3 image hover effect for thumbnails using filters, fades, blurs etc. . What is a image hover effect? How do you make a image hover effect? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.

Image Hover effect Previews
IQ Test

Image Hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Hover effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="gallery"> <li><a href="#"><img src="http://dev.steelehouse.com/codepen/game.jpg"/><span class="name">Rexodus<span class="title">Destruction Expert</span></span></a></li> <li><a href="#"><img src="http://dev.steelehouse.com/codepen/hans.jpg"/><span class="name">Joe Shmoe <span class="title">Philanthrapy Expert</span></span></a></li> <li><a href="#"><img src="http://dev.steelehouse.com/codepen/matt.jpg"/><span class="name">Steve Snyder <span class="title">Beard Extrodinarre</span></span></a></li>
</ul>
</body>
</html>

Image Hover effect - Script Codes CSS Codes

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
body { color: white; font-family: 'helvetica-nue', helvetica, arial, sans-serif;
}
.gallery { margin: 0 auto; text-align: center; width: 100%; padding: 20px;
}
.gallery li { width: 421px; min-height: 100%; text-align: center; height: 255px; position: relative; margin: 0 auto; display: inline-block; overflow: hidden; background-color: black;
}
.gallery li:nth-child(2) img { margin: 0; display: inline-block; float: right;
}
.gallery li .name { text-decoration: none; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px; color: white; font-weight: lighter; font-size: 20px; letter-spacing: .1em; position: absolute; display: block; top: 40%; left: 0; text-align: center; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; z-index: 2; width: 100%; height: 100%;
}
.gallery li .name .title { display: block; text-transform: none; font-style: italic; font-size: 80%; color: rgba(255, 255, 255, 0.7); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-duration: 0.9s; -o-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; transition-duration: 0.9s;
}
.gallery li:hover .name { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; transition-duration: 0.6s;
}
.gallery li:hover .title { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1;
}
.gallery li:hover img { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: top top; -webkit-filter: grayscale(0.4) blur(2px); filter: grayscale(0.4) blur(2px); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; transition-duration: 0.8s;
}
.gallery li:hover:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5;
}
.gallery li img { display: block; width: 421px; margin: 0 auto; display: inline-block; text-align: center; -moz-transform: scale(1.09, 1.09); -ms-transform: scale(1.09, 1.09); -webkit-transform: scale(1.09, 1.09); transform: scale(1.09, 1.09); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;
}
Image Hover effect - Script Codes
Image Hover effect - Script Codes
Home Page Home
Developer Hans Engebretsen
Username hans
Uploaded August 09, 2022
Rating 4.5
Size 3,496 Kb
Views 38,456
Do you need developer help for Image Hover effect?

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!

Hans Engebretsen (hans) Script Codes
Name
Beautiful gradients, Expanding collums
Unfolding Login Form
Whisky Friday
IMac - Scrolling effect
The World Wide Web
Visual effects Demo
HTML 5 Audio Player
Instagram API Footer
Candy Text Typographic Fun
Launch Sign up form
Create amazing video scripts 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!