CSS hover effect

Developer
Elena
Size
3,256 Kb
Views
12,144
  1. CSS hover effect Previews
  2. CSS hover effect HTML Codes
  3. CSS hover effect CSS Codes

How do I make an css hover effect?

Only CSS button hover effect. What is a css hover effect? How do you make a css hover effect? This script and codes were developed by Elena on 17 December 2022, Saturday.

CSS hover effect Previews
IQ Test

CSS hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS hover effect</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ ul { list-style-type: none; padding: 0; margin: 0;
}
h1 { font: bold 34px Tahoma; text-align: center; margin-bottom: 30px; color: #212121; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(120, 84, 71, .25);
}
.go { font: bold 14px Tahoma; color: #212121; text-align: center; display: block; margin: 0 auto;
}
@keyframes puls { 50% { box-shadow: 0 0 0 15px rgba(120, 84, 71, .01); transform: scale(1.2, 1.2) }
}
/*WRAP-2*/
.wrap-2 { overflow: hidden; margin: 0 auto;
}
.box { width: 220px; height: 380px; background: url(https://unsplash.imgix.net/photo-1433840496881-cbd845929862?fit=crop&fm=jpg&h=700&q=75&w=1050) center no-repeat; background-size: cover; margin: 20px auto 10px; position: relative; box-shadow: 0 0 0 5px rgba(120, 84, 71, .25); overflow: hidden;
}
.mask { position: absolute; top: 0; left: 0 ;right: 0; bottom: 0; text-align: center; background: rgba(0,0,0,.5); overflow: hidden; transform: translateY(-380px); transition: all 500ms ease-in-out;
}
.mask a { color: #FFF; font-size: 52px; margin: 0 -5px; overflow: hidden; display: inline-block; vertical-align: middle; width: 0px; transition: all 500ms 1000ms ease-in-out;
}
hr { width: 1px; height: 0px; background: #FFF; border: none; outline: none; display: inline-block; position: relative; margin: 0 0px -22px; transition: all 300ms 700ms ease-in-out;
}
hr:after { content: '\f111'; font: normal normal normal 14px/1 FontAwesome; color: #FFF; bottom: -3px; left: -2.2px; font-size: 7px; opacity: 0; position: absolute; transition: all 300ms 700ms ease-in-out;
}
.text { color: #D7CCC8; margin: 35px 5px; font: 14px Tahoma; opacity: 0; transform: skew(-90deg, 0deg); transition: all 500ms 1000ms ease-in-out;
}
.box:hover .mask { transform: translateY(0px);
}
.box:hover hr { height: 60%;
}
.box:hover hr:after { opacity: 1;
}
.box:hover .mask a { width: 90px;
}
.box:hover .mask a:hover i { color: #D7CCC8;
}
.box:hover .text { opacity: 1; transform: skew(0deg, 0deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>CSS Hover Effect</h1>
<div class="wrap-2"> <div class="box"> <div class="mask"> <a href="#"><i class="fa fa-facebook"></i></a> <hr /> <a href="#"><i class="fa fa-twitter"></i></a> <p class="text">Lorem ipsum dolor.</p> </div> </div> <span class="go">Hover, please!</span>
</div>
</body>
</html>

CSS hover effect - Script Codes CSS Codes

ul { list-style-type: none; padding: 0; margin: 0;
}
h1 { font: bold 34px Tahoma; text-align: center; margin-bottom: 30px; color: #212121; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(120, 84, 71, .25);
}
.go { font: bold 14px Tahoma; color: #212121; text-align: center; display: block; margin: 0 auto;
}
@keyframes puls { 50% { box-shadow: 0 0 0 15px rgba(120, 84, 71, .01); transform: scale(1.2, 1.2) }
}
/*WRAP-2*/
.wrap-2 { overflow: hidden; margin: 0 auto;
}
.box { width: 220px; height: 380px; background: url(https://unsplash.imgix.net/photo-1433840496881-cbd845929862?fit=crop&fm=jpg&h=700&q=75&w=1050) center no-repeat; background-size: cover; margin: 20px auto 10px; position: relative; box-shadow: 0 0 0 5px rgba(120, 84, 71, .25); overflow: hidden;
}
.mask { position: absolute; top: 0; left: 0 ;right: 0; bottom: 0; text-align: center; background: rgba(0,0,0,.5); overflow: hidden; transform: translateY(-380px); transition: all 500ms ease-in-out;
}
.mask a { color: #FFF; font-size: 52px; margin: 0 -5px; overflow: hidden; display: inline-block; vertical-align: middle; width: 0px; transition: all 500ms 1000ms ease-in-out;
}
hr { width: 1px; height: 0px; background: #FFF; border: none; outline: none; display: inline-block; position: relative; margin: 0 0px -22px; transition: all 300ms 700ms ease-in-out;
}
hr:after { content: '\f111'; font: normal normal normal 14px/1 FontAwesome; color: #FFF; bottom: -3px; left: -2.2px; font-size: 7px; opacity: 0; position: absolute; transition: all 300ms 700ms ease-in-out;
}
.text { color: #D7CCC8; margin: 35px 5px; font: 14px Tahoma; opacity: 0; transform: skew(-90deg, 0deg); transition: all 500ms 1000ms ease-in-out;
}
.box:hover .mask { transform: translateY(0px);
}
.box:hover hr { height: 60%;
}
.box:hover hr:after { opacity: 1;
}
.box:hover .mask a { width: 90px;
}
.box:hover .mask a:hover i { color: #D7CCC8;
}
.box:hover .text { opacity: 1; transform: skew(0deg, 0deg);
}
CSS hover effect - Script Codes
CSS hover effect - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 3,256 Kb
Views 12,144
Do you need developer help for CSS 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!

Elena (semenchenko) Script Codes
Name
Css piramide
SVG WORD Path
Card
Fish 2d game only CSS
Animation countdown
A Pen by Elena
Pricing Table
PROCESS INFOGRAPHIC
VideoBg
Slider CSS Only
Create amazing web 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!