Profile CSS Hover Effect

Developer
Emre
Size
2,530 Kb
Views
38,456
  1. Profile CSS Hover Effect Previews
  2. Profile CSS Hover Effect HTML Codes
  3. Profile CSS Hover Effect CSS Codes
  4. Profile CSS Hover Effect JS Codes

How do I make an profile css hover effect?

Forked from juliano Sousa's Pen 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 Emre on 11 October 2022, Tuesday.

Profile CSS Hover Effect Previews
IQ Test

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"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front">	<img src=""> </div> <div class="back">	<h2>Jaque Santos<span>fotografias</span></h2> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Profile CSS Hover Effect - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {	font-family: 'entypo', sans-serif;
}
html{	background-color: #e74c3c;
}
a {	text-decoration: none;
}
ul {	list-style: none;	margin: 0;	padding: 0;
}
h2 {	font-family: 'Open Sans', sans-serif;	text-transform: uppercase;	text-align: center;	letter-spacing: 10px;
}
span{	font-size: 10px;	text-transform: uppercase;	text-align: center;	display: inline-block;	letter-spacing: 20px;
}
.flip-container { position:absolute;	width: 900px;	height :700px;	background: transparent;	left: 40%;	top: 30%;
}
.flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg);
}
.flip-container, .front, .back { width: 300px; height: 300px;
}
.flipper { transition: 0.6s; transform-style: preserve-3d; position: relative;
}
.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0;
}
.front {
z-index: 2;
background:url('https://static.tumblr.com/b70d859f19419a1d63b3bfe84038de87/1ypeuyc/H4Xmr2wgq/tumblr_static_tumblr.jpg');
background-size: cover;
background-position:50%;
}
.back { transform: rotateY(180deg); background:#3C0842;}

Profile CSS Hover Effect - Script Codes JS Codes

/*===============================
Olá se chegou até aqui sinal que o meu trabalho está dando certo =D, então caso queira add fiquem a vontade
site: julianosousa.net
twitter @juliianosousa
facebook juliianosousaa
=================================*/
Profile CSS Hover Effect - Script Codes
Profile CSS Hover Effect - Script Codes
Home Page Home
Developer Emre
Username emredenx
Uploaded October 11, 2022
Rating 3
Size 2,530 Kb
Views 38,456
Do you need developer help for Profile 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!

Emre (emredenx) Script Codes
Name
A Pen by emre
Border Arrow Example
Jquery Search List System
Radio Button Style width Css
Unordered List Table System
Javascript parseURL method example
Simple Responsive Popup
Unordered List Table
Responsive CSS3 Left Menu Width Toggle Animation
Combining z-axis and x-axis translation
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!