techinplanet staffAsked By: Anonymous
I’m trying to use multiple classes to get an elevated button effect and a fade animation on a bootstrap card.
here is my code so far
index.js
import Head from 'next/head'
import Nav from '../partials/nav'
import style from '../styles/Home.module.css'
import cx from 'classnames'
export default function Home() {
function handleClick(e) {
console.log(e)
}
return (
<div className="container-fluid">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossOrigin="anonymous"></link>
</Head>
<main>
<Nav />
<div className="row row-cols-1 row-cols-md-2 category">
<div className="col mb-4">
<div className={cx[style.elevate,'card']} onClick={() => handleClick(1)}>
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay text-white">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate" onClick={() => handleClick(2)}>
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate">
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate">
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</main>
<a href="https://code.jquery.com/jquery-3.5.1.slim.min.js">https://code.jquery.com/jquery-3.5.1.slim.min.js</a>
<a href="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js</a>
<a href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js</a>
</div>
)
}
home.module.css
.elevate:hover {
box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
margin: 5px;
cursor: pointer;
}
.elevate:hover {
opacity: 1;
transition: 1s;
/* A 1 second transition. */
}
.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
how do I use classname=’card text-white(bs) elevated(home)’?
some sights say use {style.class} but that makes me use only one class.
how do I get multiple css classes in the same quotes?
Solution
Answered By: Anonymous
Try using Template literals, I am currently working on a nextjs project and came across the same issue, and using Template literals solved the issue for me.
Egs.
<div className={`d-flex ${classes.root} ${styles.parent}`}>
See if the same works for you.
