CSS on hover effects

Developer
Angela Velasquez
Size
2,689 Kb
Views
36,432
  1. CSS on hover effects Previews
  2. CSS on hover effects HTML Codes
  3. CSS on hover effects CSS Codes

How do I make an css on hover effects?

Some examples of the same effect with different element attributes on css. Feel free to fork, or comment this pen :) . What is a css on hover effects? How do you make a css on hover effects? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

CSS on hover effects Previews
IQ Test

CSS on hover effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS on hover effects</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> <h1>CSS on hover effects</h1>
<section>	<p>First Example with Box Shadow</p>	<div class="card card--shadow">	<div class="icon icon-cat">	<span class="cat">w</span>	</div>	<h2>Cats</h2>	</div>	<div class="card card--shadow">	<div class="icon icon-dog">	<span class="dog">v</span></div>	<h2>Dogs</h2>	</div>
</section>
<section>	<p>Second Example with Pseudo-Element</p>	<div class="card card--pseudo">	<div class="icon icon-cat">	<span class="cat">w</span>	</div>	<h2>Cats</h2>	</div>	<div class="card card--pseudo">	<div class="icon icon-dog">	<span class="dog">v</span></div>	<h2>Dogs</h2>	</div>
</section>
<div class="signature">	<p>Made with <i class="much-heart"></i> by <a href="https://codepen.io/AngelaVelasquez">Angela Velasquez</a></p>
</div>
</body>
</html>

CSS on hover effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:300,700);
body {	font-family: 'Roboto', sans-serif;	background-color: #F8F8F8;	color: #333;	text-align: center;
}
h1 {	font-size: 2em;	margin: 50px auto 10px;	text-transform: uppercase;
}
section {	padding: 50px;	width: 960px;	margin: 0 auto;	border-bottom: 1px dotted #BBBBBB;
}
.card {	display: inline-block;	background: #FFFFFF;	position: relative;	height: 250px;	width: 210px;	margin: 10px;	cursor: pointer;	overflow: hidden;	border: 1px solid #FFFFFF;
}
h2 {	display: block;	position: absolute;	margin: auto;	left: 0;	right: 0;	bottom: 40px;
}
.icon {	background: #FF750D;	position: absolute;	margin: auto;	left: 0;	right: 0;	top: 40px;	height: 120px;	width: 120px;	border-radius: 60px;
}
.card--pseudo .icon {	background: #00D4A3;
}
.icon span{	background: #333;	position: absolute;	margin: auto;	left: 0;	right: 0;	top: 35px;	height: 60px;	width: 60px;
}
.icon .cat {	border-radius: 30px;	color: #FFF;	line-height: 70px;
}
.icon .dog {	border-radius: 15px 15px 30px 30px;	color: #FFF;	line-height: 100px;
}
.cat::before,
.cat::after,
.dog::before,
.dog::after{	content: '';	display: block;	position: absolute;	margin: auto;	top: 0;	hegith: 0;	width: 0;	border-left: 10px solid transparent;	border-right: 15px solid transparent;	border-bottom: 20px #333333 solid;
}
.cat::before {	left: 2px;	border-left: 0px solid transparent;	border-right: 30px solid transparent;
}
.cat::after {	right: 2px;	border-left: 30px solid transparent;	border-right: 0 solid transparent;
}
.dog::before {	top: -5px;	left: 0px;	border-left: 0px solid transparent;	border-right: 50px solid transparent;
}
.dog::after {	top: -5px;	right: 0px;	border-left: 50px solid transparent;	border-right: 0 solid transparent;
}
/* Effect with Box Shadow */
.card--shadow .icon {	box-shadow: 0 0 0 0 #FF750D;	transition: all .25s ease-in-out;	-webkit-transition: all .25s ease-in-out;
}
.card--shadow:hover .icon {	box-shadow: 0 0 0 250px #FF750D;
}
/* Effect with Pseudo Element */
.card--pseudo::before {	content: '';	display: block;	position: absolute;	margin: auto;	top: 0;	left: 0;	right: 0;	bottom: 0;	height: 0;	width: 0;	background: #00D4A3;	border-radius: 50%;	z-index: 0;	transition: all .25s ease-in-out;	-webkit-transition: all .25s ease-in-out;
}
.card--pseudo:hover::before {	backgrounf: #00D4A3;	border-radius: 0;	height: 100%;	width: 100%;
}
.signature {	position: relative;	margin: auto;	bottom: 0;	top: auto;
}
.signature p{	text-align: center;	font-family: Helvetica, Arial, Sans-Serif;	font-size: 0.85em;	color: #333;
}
.signature .much-heart{	display: inline-block;	position: relative;	margin: 0 4px;	height: 10px;	width: 10px;	background: #AC1D3F;	border-radius: 4px;	-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.signature .much-heart::before,
.signature .much-heart::after { display: block; content: ''; position: absolute; margin: auto; height: 10px; width: 10px; border-radius: 5px; background: #AC1D3F; top: -4px;
}
.signature .much-heart::after {	bottom: 0;	top: auto;	left: -4px;
}
.signature a {	color: #00D4A3;	text-decoration: none;	font-weight: bold;
}
CSS on hover effects - Script Codes
CSS on hover effects - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 3.5
Size 2,689 Kb
Views 36,432
Do you need developer help for CSS on hover effects?

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!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
Pure css vertical menu
Dancing Pug
SVG Line Drawing
CSS Fruit Background - Pineapple
CSS Switch Day and Night - Cat
CSS radio buttons
CSS - Cat on the Moon
My Valentine
CSS Switch Day and Night - Fox
Layout Theme
Create amazing sales emails 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!