Yet another card...

Developer
Andreas Neeven
Size
3,819 Kb
Views
30,360
  1. Yet another card... Previews
  2. Yet another card... HTML Codes
  3. Yet another card... CSS Codes
  4. Yet another card... JS Codes

How do I make an yet another card...?

...but with a fancy quote, yo! Quick idea I had for a card animation. Cards...cards everywhere!. What is a yet another card...? How do you make a yet another card...? This script and codes were developed by Andreas Neeven on 08 September 2022, Thursday.

Yet another card... Previews
IQ Test

Yet another card... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Yet another card...</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> <div class="wrapper">	<div class="card">	<h1>I think, therefore I am.</h1>	<div class="card__content">	<i>Cogito ergo sum</i> is a Latin philosophical proposition by René Descartes usually translated into English as "I think, therefore I am". The phrase originally appeared in French as <i>je pense, donc je suis</i> in his Discourse on the Method, so as to reach a wider audience than Latin would have allowed. It appeared in Latin in his later Principles of Philosophy.	</div>	<span class="i-quote"></span>	<div class="card__overlay card__overlay--1"></div>	<div class="card__overlay card__overlay--2"></div>	<div class="card__overlay card__overlay--3"></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>

Yet another card... - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { padding: 0; margin: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
html { width: 100%; height: 100%;
}
body { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #F3F3F3;
}
.wrapper { position: relative; z-index: 1; overflow: hidden;
}
h1 { position: relative; margin-top: 0; padding-top: 35px; color: white; font-family: 'Times New Roman'; font-size: 28px; font-weight: 300; text-align: center; z-index: 5;
}
h1:after { content: ''; position: absolute; top: 110px; left: calc(50% - 1px); width: 2px; height: 1px; background-color: white; opacity: 0; -webkit-transition: .9s ease; transition: .9s ease;
}
.card { width: 350px; height: 500px; background-color: #292B33; background-image: url(https://images.unsplash.com/photo-1432839318976-b5c5785ce43f?dpr=2&fit=crop&fm=jpg&h=900&ixlib=rb-0.3.5&q=50&w=1700); background-size: cover; cursor: pointer;
}
.card .i-quote { position: absolute; content: ''; width: 32px; height: 32px; top: calc(50% - 16px); left: calc(50% - 16px); background-image: url(https://cdn.pbrd.co/images/21KhDkyI.png); z-index: 5; opacity: .1;
}
.card__content { position: relative; padding: 75px 35px 0 35px; color: white; font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; opacity: 0; z-index: 5; -webkit-transition: opacity .9s; transition: opacity .9s;
}
.card__overlay { position: absolute; border-radius: 50%; background-color: #000; z-index: 2; -webkit-transition: all .9s; transition: all .9s;
}
.card__overlay--1 { top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; opacity: .6; -webkit-transition: all .3s ease; transition: all .3s ease;
}
.card__overlay--2 { top: calc(50% - 37.5px); left: calc(50% - 37.5px); width: 75px; height: 75px; opacity: .4; -webkit-transition: all .6s ease; transition: all .6s ease;
}
.card__overlay--3 { top: calc(50% - 50px); left: calc(50% - 50px); width: 100px; height: 100px; opacity: .2; -webkit-transition: all .9s ease; transition: all .9s ease;
}
.js-trigger h1:after { content: ''; position: absolute; top: 110px; left: calc(50% - 75px); width: 150px; height: 1px; background-color: white; opacity: .3;
}
.js-trigger .card__overlay { width: 620px; height: 620px; top: calc(50% - 310px); left: calc(50% - 310px);
}
.js-trigger .card__content { opacity: 1;
}
.js-trigger .i-quote { opacity: 0;
}

Yet another card... - Script Codes JS Codes

$('.card').on('click', function() {	$(this).toggleClass('js-trigger');
});
Yet another card... - Script Codes
Yet another card... - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 08, 2022
Rating 4.5
Size 3,819 Kb
Views 30,360
Do you need developer help for Yet another card...?

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!

Andreas Neeven (aneeven) Script Codes
Name
Fun stuff with transforms, transitions and border radius
Sass loop
SVG Heart Animation
Flexbox grow, shrink and basis
Mail Element Concept
Yay for blend-modes
Flexbox align
Neon Hexagons SVG Image-Fill
Digital Sucks
Custom Profile
Create amazing SEO 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!