Hover Effects

Developer
Nicholas M. Smith
Size
3,521 Kb
Views
30,360
  1. Hover Effects Previews
  2. Hover Effects HTML Codes
  3. Hover Effects CSS Codes

How do I make an hover effects?

What is a hover effects? How do you make a hover effects? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

Hover Effects Previews
IQ Test

Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="32" viewBox="0 0 80 32">
<defs>
<g id="icon-tea">	<path class="path1" d="M29.984 15.548c-0.378-3.639-4.063-3.618-5.977-3.553 0.009-0.553 0.015-0.999 0.015-0.999l-22.027-0.007c0 0 0 3.014 0 3.089 0 4.281 2.445 7.984 6.011 9.809v1.068h10.019v-1.068c1-0.512 1.897-1.184 2.691-1.961 4.915-1.176 10.070-2.873 9.268-6.378zM22.25 20.066c1.123-1.725 1.786-3.775 1.786-5.988 0 0.017 0.001-0.029 0.002-0.116 1.785-0.059 3.755-0.237 4.201 1.54 0.448 1.955-2.817 3.547-5.989 4.564zM8.83 6.99c0 1-1.64 2.065-1.64 2.065s3.214-0.574 3.214-2.074-3.187-0.5-3.187-1.625 1.577-2.19 1.577-2.19-3.025 0.637-3.025 2.199 3.061 0.625 3.061 1.625zM13.83 7.99c0 1-1.64 2.065-1.64 2.065s3.214-0.574 3.214-2.074-3.187-0.5-3.187-1.625 1.577-2.19 1.577-2.19-3.026 0.637-3.026 2.199 3.062 0.625 3.062 1.625zM17.83 6.99c0 1-1.64 2.065-1.64 2.065s3.214-0.574 3.214-2.074-3.187-0.5-3.187-1.625 1.577-2.19 1.577-2.19-3.026 0.637-3.026 2.199 3.062 0.625 3.062 1.625zM1.933 25.928c0 1.381 4.925 2.5 11 2.5s11-1.119 11-2.5c0 0.029-22 0.029-22 0z"></path>
</g>
</defs></svg>
<div class="page-wrap"> <div class="img-container"> <img class="left" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5462/tea.jpg"/> <div class="img-content content-left"> <h1>Black Tea</h1> <a href="#"><svg class="icon icon-tea" viewBox="0 0 32 32"><use xlink:href="#icon-tea"></use></svg></a> </div> </div> <div class="img-container"> <img class="top" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5462/tea2.jpg"/> <div class="img-content content-top"> <h1>Green Tea</h1> <a href="#"><svg class="icon icon-tea" viewBox="0 0 32 32"><use xlink:href="#icon-tea"></use></svg></a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Hover Effects - Script Codes CSS Codes

html, body { background: #739995; height: 100%; width: 100%;
}
* { box-sizing: border-box;
}
.page-wrap { display: flex; align-items: center; justify-content: center; flex-direction: row; padding: 30px; height: 100%; width: 100%;
}
.img-container { background: #C2B991; border: 1px solid rgba(149, 167, 147, 0.7); display: flex; align-items: center; justify-content: center; height: 300px; margin: 10px; overflow: hidden; position: relative; width: 300px;
}
.img-container img { position: absolute; top: 0; left: 0; transition: all 0.25s linear; transform: translateX(0);
}
.img-content { background: #95A793; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 0.25s linear;
}
.content-left { transform: translateX(-300px);
}
.content-right { transform: translateX(300px);
}
.content-top { transform: translateY(-300px);
}
.content-bottom { transform: translateY(300px);
}
.img-container:hover img { transition: all 0.25s linear;
}
.img-container:hover img.left { transform: translateX(100px);
}
.img-container:hover img.right { transform: translateX(-100px);
}
.img-container:hover img.top { transform: translateY(100px);
}
.img-container:hover img.bottom { transform: translateY(-100px);
}
.img-container:hover .content-left,
.img-container:hover .content-right { transform: translateX(0);
}
.img-container:hover .content-top,
.img-container:hover .content-bottom { transform: translateY(0);
}
h1 { color: white; font-family: 'PT Sans Narrow', sans-serif; font-weight: 400; letter-spacing: 0.2rem; margin: 0; padding: 0; text-transform: uppercase;
}
.icon-tea { fill: white; height: 40px; width: 40px; transition: fill 0.15s ease-in-out;
}
.icon-tea:hover { fill: #46605d; transition: fill 0.15s ease-in-out;
}
@media only screen and (max-width: 700px) { .page-wrap { flex-direction: column; height: auto; width: auto; }
}
Hover Effects - Script Codes
Hover Effects - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 3
Size 3,521 Kb
Views 30,360
Do you need developer help for Hover Effects?

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!

Nicholas M. Smith (icutpeople) Script Codes
Name
CSS Modal
Button
CSS 8-Bit Box Shadow DuckTales
Blur Image Hovers
Social Icon Hover Boxes
Flip Navicon
Pure CSS Minecraft Enderman
Animated Image Hovers
Wordpress 3.8 loader
Aside Nav Animated
Create amazing blog posts 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!