Transition - Transition Functions and Transition Delay

Developer
Aaron Cuddeback
Size
3,178 Kb
Views
18,216
  1. Transition - Transition Functions and Transition Delay Previews
  2. Transition - Transition Functions and Transition Delay HTML Codes
  3. Transition - Transition Functions and Transition Delay CSS Codes

How do I make an transition - transition functions and transition delay?

What is a transition - transition functions and transition delay? How do you make a transition - transition functions and transition delay? This script and codes were developed by Aaron Cuddeback on 03 November 2022, Thursday.

Transition - Transition Functions and Transition Delay Previews
IQ Test

Transition - Transition Functions and Transition Delay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transition - Transition Functions and Transition Delay</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>
<html>
<head>	<title>Transition Gallery</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>	<link rel="stylesheet" href="css/main.css">	<link rel="stylesheet" href="css/interactions.css">
</head>
<body>	<div class="container">	<header class="main-header clearfix">	<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/548344/camera.svg">	<h1 class="name">	Transition <span>Gallery</span></h1>	</header>	<div class="content clearfix">	<div class="photo-container">	<div class="photo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/548344/1.jpg" alt="A photo of a grizzly bear"> <div class="photo-overlay"> <h3>Grizzly Bear</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">	download	<span class="btn-icon"></span> </a>	</div>	</div>	</div>	<div class="photo-container">	<div class="photo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/548344/2.jpg" alt="A mountainous landscape"> <div class="photo-overlay"> <h3>Mountainous Landscape</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">	download	<span class="btn-icon"></span> </a>	</div>	</div>	</div>	<div class="photo-container">	<div class="photo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/548344/3.jpg" alt="Yosemite national park"> <div class="photo-overlay"> <h3>Yosemite National Park</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">	download	<span class="btn-icon"></span> </a>	</div>	</div>	</div>	</div>	</div>
</body>
</html>
</body>
</html>

Transition - Transition Functions and Transition Delay - Script Codes CSS Codes

/* ================================= Base Element Styles
==================================== */
* {	box-sizing: border-box;
}
body {	font: 1em/1.5 'Open Sans', sans-serif;	color: #373737;	background: #eaeaea;	margin: 0;
}
a {	text-decoration: none;
}
h1,
h2,
h3 {	text-transform: uppercase;
}
h2 {	font-size: 1.125em;	color: #4a89ca;	font-weight: 600;	margin: 0;
}
h3 {	font-size: 1.3em;	line-height: 1.25em;	margin-top: 0em;	margin-bottom: .5em;
}
p {	font-size: .875em;	line-height: 1.4;	margin: 0 0 1.5em;
}
/* ================================= Base Layout Styles
==================================== */
/* ---- Layout Containers ---- */
.container {	width: 94.02985075%;	max-width: 1260px;	background: #fff;	margin: auto;
}
.main-header {	text-align: center;	padding: 2.8em 0;
}
.photo-container {	text-align: center;	margin-bottom: 4em;
}
/* ---- Page Elements ---- */
.name {	font-size: 1.65em;	font-weight: 800;	margin: 0 0 1.5em;	line-height: 1;
}
.name span {	font-weight: 300;	margin-left: -7px;
}
.logo {	width: 45px;	margin-bottom: .4em;
}
.photo {	position: relative;	line-height: 0;	overflow: hidden;
}
.photo-container img {	max-width: 100%;
}
.button {	color: #fff;	width: 75%;	font-weight: 700;	display: block;	text-decoration: none;	text-transform: uppercase;	background: rgba(74,137,202, .65);	padding: 22px 0;	border-radius: .5em;	margin: 0;	position: relative;
}
.btn-icon {	opacity: 0;	display: inline-block;	width: 18px;	height: 18px;	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/548344/download.svg');	position: absolute;	left: 45%;	top: 27%;
}
/* ---- Photo Overlay ---- */
.photo-overlay {	color: #fff;	position: absolute;	top: 0;	right: 0;	bottom: 0;	left: 0;	padding-left: 20px;	padding-right: 20px;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-orient: vertical;	-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	background: rgba(0,0,0, .65);
}
/* ---- Float clearfix ---- */
.clearfix::after {	content: " ";	display: table;	clear: both;
}
/* ================================= Media Queries
==================================== */
@media (min-width: 0) and (max-width: 768px) {	.container {	padding: 0 1.225em 2.5em;	}
}
@media (min-width: 769px) {	.container {	padding: 0 2.25em 2em;	}	.photo-container {	width: 48%;	float: left;	margin-left: 4%;	}
}
@media (min-width: 769px) and (max-width: 1024px) {	.photo-container:nth-child(2n+1) {	margin-left: 0;	clear: left;	}
}
@media (min-width: 1025px) {	.photo-container {	width: 30.63973064%;	}	.photo-container:nth-child(3n+1) {	margin-left: 0;	clear: left;	}
}
/* ================================= Photo Overlay Transition
==================================== */
.photo-overlay {	opacity: 0;	-webkit-transition-property: opacity;	transition-property: opacity;	-webkit-transition-duration: .5s; transition-duration: .5s;
}
.photo-overlay:hover {	opacity: 1;
}
/* ================================= Button Transitions
==================================== */
.button { opacity: 0; -webkit-transition-property: opacity, background, box-shadow; transition-property: opacity, background, box-shadow; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-delay: .2s .3s 0s; transition-delay: .2s .3s 0s;
}
.button:hover { background: rgba(74, 137, 202, 1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.photo-overlay:hover .button { opacity: 1;
}
.btn-icon { -webkit-transition-property: opacity, left; transition-property: opacity, left; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.button:hover .btn-icon { opacity: 1; left: 80%;
}
Transition - Transition Functions and Transition Delay - Script Codes
Transition - Transition Functions and Transition Delay - Script Codes
Home Page Home
Developer Aaron Cuddeback
Username gymratpacks
Uploaded November 03, 2022
Rating 3
Size 3,178 Kb
Views 18,216
Do you need developer help for Transition - Transition Functions and Transition Delay?

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!

Aaron Cuddeback (gymratpacks) Script Codes
Name
Personal Portfolio
Tribute Page
Horizontal Navigation with Floats
Bootstrap Boilerplate
Full Page Header
Animating SVG with CSS
3D Transform Gallery
FlexBox Layout
Booking Form Example
Random Quote Generator
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!