Image Hover Animation
Hello guys today we are going to build Image Hover Animation. as you know the HTML markup is necessary for that so we should have some HTML markup first. Below is the code provided and you have to save it with the filename as provided.
Save It As index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>#1529 - Image Hover</title>
<link rel="stylesheet" href="https://www.littlesnippets.net/css/codepen-result.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<figure class="snip1529">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample13.jpg" alt="pr-sample13" />
<div class="date"><span class="day">28</span><span class="month">Apr</span></div>
<figcaption>
<h3>An Abstract Post Heading</h3>
<p>Which is worse, that everyone has his price, or that the price is always so low.</p>
</figcaption>
<div class="hover"><i class="ion-android-open"></i></div>
<a href="#"></a>
</figure>
<figure class="snip1529 hover">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample21.jpg" alt="pr-sample21" />
<div class="date"><span class="day">17</span><span class="month">May</span></div>
<figcaption>
<h3>Down with this sort of thing</h3>
<p>I"m killing time while I wait for life to shower me with meaning and happiness.</p>
</figcaption>
<div class="hover"><i class="ion-android-open"></i></div>
<a href="#"></a>
</figure>
<figure class="snip1529">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample23.jpg" alt="pr-sample23" />
<div class="date"><span class="day">08</span><span class="month">June</span></div>
<figcaption>
<h3>The World Ended Yesterday</h3>
<p>The only skills I have the patience to learn are those that have no real application in life.</p>
</figcaption>
<div class="hover"><i class="ion-android-open"></i></div>
<a href="#"></a>
</figure>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>Without CSS our project will never look beautiful. So here we are the HTML markup is ready now we have to customize our HTML and it can be done using CSS so below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file in that directory.
Save It As style.css :
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1529 {
background-color: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #ffffff;
font-family: "Open Sans", Arial, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 10px;
max-width: 310px;
min-width: 250px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
}
.snip1529 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1529 img {
max-width: 100%;
vertical-align: top;
position: relative;
opacity: 0.75;
}
.snip1529 figcaption {
padding: 25px 20px 25px;
position: absolute;
bottom: 0;
z-index: 1;
}
.snip1529 .date {
background-color: #fff;
color: #333;
font-size: 18px;
font-weight: 800;
min-height: 48px;
min-width: 48px;
padding: 10px 0;
position: absolute;
right: 15px;
text-align: center;
text-transform: uppercase;
top: 0;
}
.snip1529 .date span {
display: block;
line-height: 14px;
}
.snip1529 .date .month {
font-size: 11px;
}
.snip1529 h3,
.snip1529 p {
margin: 0;
padding: 0;
}
.snip1529 h3 {
font-weight: 800;
letter-spacing: -0.4px;
}
.snip1529 .hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
background-color: rgba(236, 188, 46, 0.75);
display: flex;
font-size: 65px;
justify-content: center;
opacity: 0;
}
.snip1529 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
.snip1529:hover .hover,
.snip1529.hover .hover {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 1;
}
.snip1529:hover figcaption,
.snip1529.hover figcaption {
opacity: 0;
}
.snip1529:hover .date,
.snip1529.hover .date {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/* Demo purposes only */
body {
background-color: #212121;
}So we have written HTML markup and customized it and now we will add some functionality in this project to make this project work properly so for that we will use JavaScript. So here is a JavaScript for our project and also save it with the filename as provided. Make a new directory called js and put this file in that directory.
Save It As index.js :
/* Demo purposes only */
$(".hover").mouseleave(function () {
$(this).removeClass("hover");
});Conclusion:
So here we are we have done and our project Image Hover Animation is ready now you can save all the files as provided. like CSS files in the CSS directory and JavaScript files in a JS directory name below is a directory tree of the files and folders of this project.
- Image Hover Animation
- css
- style.css
- js
- index.js
- index.html
- css
Download Project File :
DownloadI hope that you will like this post and if you do then please share it with your friends and keep visiting this site for more of these kinds of projects and tutorials.
Be The First To Comment