I created a CSS card design and added hover transitions to a few properties of the button at the bottom of the card. I added them for background and color properties. Unfortunately, the hover animation is not smooth. The background color should transform smoothly in half a second like the text, but it happens immediately.
* {
margin: 0px;
padding: 0px;
font-family: "Roboto Slab";
outline: none;
border: 0px;
}
.Cards {
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.Card {
position: relative;
width: 400px;
margin: 15px;
display: flex;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
}
.Card-Image {
width: 100%;
height: 225px;
}
.Card-Content {
padding: 20px 20px 0px 20px;
background: #BC4749;
}
.Card-Body {
padding: 15px;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
transform: translateY(-40px);
}
.Card-Title {
font-size: 22px;
font-weight: bold;
}
.Card-Description {
font-size: 16px;
margin-top: 10px;
}
.Card-List {
font-size: 16px;
list-style-type: square;
margin-top: 10px;
margin-left: 15px;
}
.Card-Button-Space {
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-20px);
}
.Card-Button {
padding: 10px;
width: 100%;
font-size: 22px;
cursor: pointer;
transition: color 0.5s;
}
.Card-Button:hover {
background: #000000;
color: #FFFFFF;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Roboto Slab&display=swap" rel = "stylesheet">
<title>ItsMrVaibhav - Card Design</title>
</head>
<body>
<div class = "Cards">
<div class = "Card">
<img class = "Card-Image" src = "https://source.unsplash.com/1600x900/?woods" alt = "Card Image">
<div class = "Card-Content">
<div class = "Card-Body">
<p class = "Card-Title">Card Title goes here</p>
<p class = "Card-Description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex dicta fuga repellat, labore ab earum dolorum, nemo quidem doloribus?</p>
<ul class = "Card-List">
<li>First sentence</li>
<li>Second sentence</li>
<li>Third sentence</li>
</ul>
<p class = "Card-Description">Ipsam optio assumenda nam, ex dicta fuga repellat aliquid amet eligendi beatae? Deleniti pariatur suscipit exercitationem natus.</p>
</div>
<div class = "Card-Button-Space">
<button class = "Card-Button">Click to Learn More</button>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
transition: color 0.5s;
This line only makes any transition applied to the color property smooth. In order to make background transition smooth as well, you need to set it for all the properties. You can do that using the all keyword. Just change the above line to the following.
transition: all 0.5s;
Additionally, you can also be specific and apply transition duration only to these two properties using the following snippet.
transition-property: background, color;
transition-duration: 0.5s;
Using the transition-property CSS property, you can target specific properties.
* {
margin: 0px;
padding: 0px;
font-family: "Roboto Slab";
outline: none;
border: 0px;
}
.Cards {
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.Card {
position: relative;
width: 400px;
margin: 15px;
display: flex;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
}
.Card-Image {
width: 100%;
height: 225px;
}
.Card-Content {
padding: 20px 20px 0px 20px;
background: #BC4749;
}
.Card-Body {
padding: 15px;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
transform: translateY(-40px);
}
.Card-Title {
font-size: 22px;
font-weight: bold;
}
.Card-Description {
font-size: 16px;
margin-top: 10px;
}
.Card-List {
font-size: 16px;
list-style-type: square;
margin-top: 10px;
margin-left: 15px;
}
.Card-Button-Space {
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-20px);
}
.Card-Button {
padding: 10px;
width: 100%;
font-size: 22px;
cursor: pointer;
transition: all 0.5s;
}
.Card-Button:hover {
background: #000000;
color: #FFFFFF;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Roboto Slab&display=swap" rel = "stylesheet">
<title>ItsMrVaibhav - Card Design</title>
</head>
<body>
<div class = "Cards">
<div class = "Card">
<img class = "Card-Image" src = "https://source.unsplash.com/1600x900/?woods" alt = "Card Image">
<div class = "Card-Content">
<div class = "Card-Body">
<p class = "Card-Title">Card Title goes here</p>
<p class = "Card-Description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex dicta fuga repellat, labore ab earum dolorum, nemo quidem doloribus?</p>
<ul class = "Card-List">
<li>First sentence</li>
<li>Second sentence</li>
<li>Third sentence</li>
</ul>
<p class = "Card-Description">Ipsam optio assumenda nam, ex dicta fuga repellat aliquid amet eligendi beatae? Deleniti pariatur suscipit exercitationem natus.</p>
</div>
<div class = "Card-Button-Space">
<button class = "Card-Button">Click to Learn More</button>
</div>
</div>
</div>
</div>
</body>
</html>