Simple animated hover effect

Developer
M Pobee-Norris
Size
3,044 Kb
Views
32,368
  1. Simple animated hover effect Previews
  2. Simple animated hover effect HTML Codes
  3. Simple animated hover effect CSS Codes

How do I make an simple animated hover effect?

What is a simple animated hover effect? How do you make a simple animated hover effect? This script and codes were developed by M Pobee-Norris on 12 August 2022, Friday.

Simple animated hover effect Previews
IQ Test

Simple animated hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple animated hover effect</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2014/05/dandelion-seed-head.jpg " alt="dandelion-seed-head" />	<div class="jm-item-description"> Tribute Page built as a freeCodeCamp challenge. <br/> <br/> <div class="jm-item-button"><a href="#http://codepen.io/pobee-norris/pen/EWjaMM" target="_blank">View</a></div>	</div>	</div>	<div class="jm-item-title">Tribute Page</div>	</div>
</div>
<div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2013/09/font-de-la-granota-3.jpg" alt="Font de la Granota #3" />	<div class="jm-item-description"> Poem inspired by an image titled “Halakki Tribe Woman” by Joshi Daniel. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2013/02/03/my-face-as-introduction-2/" target="_blank">View</a></div>	</div>	</div>	<div class="jm-item-title">My Face As Introduction</div>	</div>
</div>
<div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2013/07/dolphins.jpg" alt="dolphins" />	<div class="jm-item-description"> Short story written & submitted for a writing challenge where we were given an image and directed to base a post on it. <br/> <br/> <div class="jm-item-button"><a href=" target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">A Picture-Perfect Moment</div>	</div>
</div> <div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2013/01/google-map-replacement1.jpg" alt="mightwar Google Map replacement" />	<div class="jm-item-description"> Some thoughts on technology and its role in my life. Short version? Me and technology don’t go. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2012/11/19/technology-and-sht/" target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">Technology … and sh!t</div>	</div>
</div> <div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2012/12/zebra-painting.jpg" alt="zebra painting" />	<div class="jm-item-description"> A short discourse on what motivates my writing style. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2013/12/05/seeking-forgiveness/ " target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">Seeking Forgiveness</div>	</div>
</div> <div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2013/11/sheep-crossing-road.jpg" alt="sheep-crossing-road" />	<div class="jm-item-description"> I’m always finding new and interesting ways of meeting people – even when I’m not trying. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2013/06/13/i-am-a-marvel/" target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">I Am A Marvel</div>	</div>
</div> <div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2013/11/mightwar-header-image-2013.jpg" alt="mightwar-header-image-2013" />	<div class="jm-item-description"> The first of a weekly music post. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2013/01/04/the-listening-booth-week-1/" target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">The Listening Booth: Week #1</div>	</div>
</div> <div class="jm-item second">	<div class="jm-item-wrapper">	<div class="jm-item-image">	<img src="https://mightwar.files.wordpress.com/2012/12/shadow1-e1369786213829.jpg" alt=""Shadow" poem" />	<div class="jm-item-description"> A short poem. <br/> <br/> <div class="jm-item-button"><a href="https://mightwar.com/2014/01/08/best-of-mightwar-2013/" target="_blank"">View</a></div>	</div>	</div>	<div class="jm-item-title">Shadow</div>	</div>
</div>
</body>
</html>

Simple animated hover effect - Script Codes CSS Codes

.jm-item {	padding: 10px;	display: inline-block;	text-align: left;
}
.jm-item-wrapper {	position: relative;	padding: 7px;	background: #E8D7B6;
}
.jm-item-image {	position: relative;	overflow: hidden; width: 360px; height: 260px;
}
.jm-item-image img {	display: block;
}
.jm-item-title { position: absolute; left: -10px; bottom: 17px; background: #FF6B0E; line-height: 1.5em; font-weight: normal; padding: 7px 9px 6px; text-transform: uppercase; font-family: 'Oswald', sans-serif; color: #FFFFFF; font-size: 1.4em;
}
.jm-item-overlay {	background: #000;	opacity: 0;	position: absolute;	width: 100%;	height: 100%;	top: 0;	left: 0;	-webkit-transition: opacity 0.5s ease-in 0s;	-moz-transition: opacity 0.5s ease-in 0s;	-o-transition: opacity 0.5s ease-in 0s;	transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {	opacity: 0.3;
}
.jm-item-button {	height: 50px;	width: 50px;	text-align: center;	position: absolute;	left: 50%;	margin-left: -25px;
}
.jm-item-button a { border-radius: 50%; -webkit-border-radius: 50%; background: #FF6B0E; text-transform: uppercase; font-family: 'Oswald', sans-serif; color: #FFFFFF; font-size: 1.2em; line-height: 50px; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; -o-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s; text-decoration: none !important; display: block;
}
.jm-item-button a:hover {	background: #3b3b3b;
}
.second .jm-item-wrapper .jm-item-title {	-webkit-transition: all 0.2s ease-in 0s;	-moz-transition: all 0.2s ease-in 0s;	-o-transition: all 0.2s ease-in 0s;	transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {	left: -100%;
}
.second .jm-item-description {	position: absolute;	width: 100%;	height: 100%;	padding: 10px;	box-sizing: border-box;	-moz-box-sizing: border-box;	-webkit-box-sizing: border-box;	background: rgba(0,0,0,0.4);	color: #fff;	top: 100%;	-webkit-transition: all 0.5s ease-in 0s;	-moz-transition: all 0.5s ease-in 0s;	-o-transition: all 0.5s ease-in 0s;	transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {	top: 0;
}
Simple animated hover effect - Script Codes
Simple animated hover effect - Script Codes
Home Page Home
Developer M Pobee-Norris
Username pobee-norris
Uploaded August 12, 2022
Rating 3
Size 3,044 Kb
Views 32,368
Do you need developer help for Simple animated 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!

M Pobee-Norris (pobee-norris) Script Codes
Name
Personal Portfolio Webpage
Tribute Page
Fixed navigation bar
Portfolio - font test
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!