Hover effect

Developer
EOS
Size
2,605 Kb
Views
4,048
  1. Hover effect Previews
  2. Hover effect HTML Codes
  3. Hover effect CSS Codes

How do I make an hover effect?

What is a hover effect? How do you make a hover effect? This script and codes were developed by EOS on 10 January 2023, Tuesday.

Hover effect Previews
IQ Test

Hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hover effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="view view-first"> <img src="http://thegraphicsfairy.com/wp-content/uploads/2013/02/Anatomy-Heart-Images-Vintage-GraphicsFairy.jpg" /> <div class="mask"> <h2>Here is to come</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iusto esse eos ullam eligendi odio rerum numquam sit optio enim rem adipisci porro itaque quo quibusdam labore temporibus eius voluptatum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi aliquam tenetur maiores distinctio rem. Hic excepturi accusantium nihil mollitia saepe eveniet quos enim quasi vero voluptatem ut voluptatibus facilis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deleniti tempore facilis laborum deserunt sed eaque neque delectus ea perferendis id </p> <a href="#" class="info">See more +</a> </div>
</div>
</div>
<div class="footer">
<a class="backlink" href="http://thegraphicsfairy.com//" target="_blank">Thanks to Graphics fairy for the images!</a>
</div>
</body>
</html>

Hover effect - Script Codes CSS Codes

body { background: cornsilk;
}
.view { width: 350px; height: 400px; margin: 10px; float: left; border: 10px solid peachpuff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(https://tympanus.net/Tutorials/OriginalHoverEffects/images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content { width: 350px; height: 400px; position: absolute; overflow: hidden; top: 0; left: 0
}
.view img { display: block; position: relative
}
.view h2 { text-transform: uppercase; color: cornsilk; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(93,69,36, 0.8); margin: 20px 0 0 0
}
.view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #5D4524; padding: 10px 20px 20px; text-align: center
}
.view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #5D4524; color: cornsilk; text-transform: uppercase; box-shadow: 0 0 1px #FFF8DC
}
.view a.info:hover { color:peachpuff; box-shadow: 0 0 5px #FFF8DC
}
/*HOVER !*/
.view-first img { transition: all 0.2s linear;
}
.view-first .mask { opacity: 0; background-color: rgba(255, 218, 185,0.7); transition: all 0.4s ease-in-out;
}
.view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out;
}
.view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear;
}
.view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out;
}
.view-first:hover img { transform: scale(1.1);
}
.view-first:hover .mask { opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info { opacity: 1; transform: translateY(0px);
}
.view-first:hover p { transition-delay: 0.1s;
}
.view-first:hover a.info { transition-delay: 0.2s;
}
.footer {
position:fixed; right:3px; bottom:3px; clear:both; background-color:peachpuff; padding:20px; font-family: Arial; font-size:10px; text-align: center;
}
.backlink { color:tan; text-decoration:none;
}
.backlink:hover { color:#615341;
}
Hover effect - Script Codes
Hover effect - Script Codes
Home Page Home
Developer EOS
Username aurumlux
Uploaded January 10, 2023
Rating 3
Size 2,605 Kb
Views 4,048
Do you need developer help for 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!

EOS (aurumlux) Script Codes
Name
Banner navigation
Background scroll
CIRCLE
ZIRKUS
Go top
FLOWER HOVER
Custom
Tooltip
HEXAGON
STELLA
Create amazing SEO 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!