Profile CSS Hover Effect
How do I make an profile css hover effect?
What is a profile css hover effect? How do you make a profile css hover effect? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.
Profile CSS Hover Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile CSS Hover Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { background: #485b6e;
}
.container { max-width: 500px; margin-left: auto; margin-right: auto; margin-top: 10%;
}
h1 { font-family: "Open Sans", sans; font-weight: 300; text-align: center; color: rgba(255, 255, 255, 0.6);
}
h2 { color: #2c3e52; font-family: "Open Sans", sans; font-size: 14px; text-align: center; font-weight: 700; margin-bottom: 50px;
}
.service-details { /*width: 460px;*/ height: 250px; /*height: 230px;*/ overflow: hidden; position: relative;
}
.service-details img { position: absolute; top: 0; left: 0; height: inherit; width: auto; height: 100%; float: left; transition: all 0.8s; -moz-transition: all 0.8s;
}
.service-details:hover img { /*opacity: 0.4 !important;*/
}
.service-details .service-hover-text h3 { padding: 0px; margin: 0px; font-size: 25px; font-weight: 300; font-family: "Open Sans";
}
.service-details .service-hover-text h4 { padding: 0px; padding-bottom: 13px; margin: 0px; font-size: 14px; letter-spacing: 3px; width: 90%; font-family: "Open Sans"; text-transform: uppercase; border-bottom: 2px solid #000;
}
.service-details .service-hover-text p { padding-top: 13px; font-size: 14px; line-height: 20px; font-family: "Open Sans";
}
.service-details .service-hover-text { width: 42%; height: 89%; position: absolute; top: 0%; left: 50%; padding: 3% 4%; background: #D90E0E; color: white; /* display: none;*/ transition: all 0.5s ease-in-out; -moz-transition: all 0.4s;
}
.service-details:hover .service-hover-text { display: block !important; color: white; background: rgba(217, 14, 14, 0.85); left: 0px; top: 0px;
}
.service-details .service-text { width: 50%; height: inherit; background: #000; float: left; position: absolute; left: 50%;
}
.service-details .service-text p { padding: 100px 0px 0px 20px; font-size: 24px; font-family: "Open Sans"; font-weight: 700; color: #fff;
}
.service-details .service-text p span { font-family: "Open Sans" !important;
}
.service-details .service-text a, .service-white .service-text { padding: 0px 0px 0px 20px; font-size: 14px !important; color: #FF5A22 !important; font-family: "Open Sans" !important; text-decoration: none !important;
}
.service-details .service-text { float: left;
}
.service-white { background: #eee !important; width: 50% !important; height: inherit !important;
}
.service-white p { color: #000 !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"><h1>Profile CSS Hover Effect</h1><h2>HTML + CSS ONLY</h2><div class="service-details"><img src="http://i.imgur.com/SkFZNy4.jpg" alt="realm"><div class="service-hover-text"><h3>Jane Doe</h3><h4>Developer</h4><p>Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet. </p></div><div class="service-white service-text"><p>Jane Doe</p><a href="#">@JaneDoe</a></div></div></div>
</body>
</html>
Profile CSS Hover Effect - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { background: #485b6e;
}
.container { max-width: 500px; margin-left: auto; margin-right: auto; margin-top: 10%;
}
h1 { font-family: "Open Sans", sans; font-weight: 300; text-align: center; color: rgba(255, 255, 255, 0.6);
}
h2 { color: #2c3e52; font-family: "Open Sans", sans; font-size: 14px; text-align: center; font-weight: 700; margin-bottom: 50px;
}
.service-details { /*width: 460px;*/ height: 250px; /*height: 230px;*/ overflow: hidden; position: relative;
}
.service-details img { position: absolute; top: 0; left: 0; height: inherit; width: auto; height: 100%; float: left; transition: all 0.8s; -moz-transition: all 0.8s;
}
.service-details:hover img { /*opacity: 0.4 !important;*/
}
.service-details .service-hover-text h3 { padding: 0px; margin: 0px; font-size: 25px; font-weight: 300; font-family: "Open Sans";
}
.service-details .service-hover-text h4 { padding: 0px; padding-bottom: 13px; margin: 0px; font-size: 14px; letter-spacing: 3px; width: 90%; font-family: "Open Sans"; text-transform: uppercase; border-bottom: 2px solid #000;
}
.service-details .service-hover-text p { padding-top: 13px; font-size: 14px; line-height: 20px; font-family: "Open Sans";
}
.service-details .service-hover-text { width: 42%; height: 89%; position: absolute; top: 0%; left: 50%; padding: 3% 4%; background: #D90E0E; color: white; /* display: none;*/ transition: all 0.5s ease-in-out; -moz-transition: all 0.4s;
}
.service-details:hover .service-hover-text { display: block !important; color: white; background: rgba(217, 14, 14, 0.85); left: 0px; top: 0px;
}
.service-details .service-text { width: 50%; height: inherit; background: #000; float: left; position: absolute; left: 50%;
}
.service-details .service-text p { padding: 100px 0px 0px 20px; font-size: 24px; font-family: "Open Sans"; font-weight: 700; color: #fff;
}
.service-details .service-text p span { font-family: "Open Sans" !important;
}
.service-details .service-text a, .service-white .service-text { padding: 0px 0px 0px 20px; font-size: 14px !important; color: #FF5A22 !important; font-family: "Open Sans" !important; text-decoration: none !important;
}
.service-details .service-text { float: left;
}
.service-white { background: #eee !important; width: 50% !important; height: inherit !important;
}
.service-white p { color: #000 !important;
}
Developer | Eric Rogg |
Username | er40 |
Uploaded | August 24, 2022 |
Rating | 4.5 |
Size | 4,632 Kb |
Views | 38,456 |
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!
Name | Size |
Sign Up Form | 2,373 Kb |
Flat CSS File Icons | 4,684 Kb |
Casestudy | 3,080 Kb |
CTA | 2,367 Kb |
Pattern Library | 6,763 Kb |
Checkbox | 5,169 Kb |
Widget | 5,735 Kb |
Header | 1,542 Kb |
Collapsing Widget | 4,279 Kb |
A Pen by Eric Rogg | 2,795 Kb |
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!
Name | Username | Size |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
My three.js practice | Esambino | 3,203 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!