can I ask if what is the cause of my css code here, when I hovered over the class it display the background color, however the text color wont display it when I try to hover it the button.
<li class="cards-carousel">
<div class="img">
<img
src="img/adams-homes.png"
draggable="false"
alt="Adams Home"
/>
</div>
<h2>Adams Home</h2>
<div class="links btn">
<a href="#">View Floor Plans</a>
</div>
</li>
.cards-carousel .links a {
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
font-weight: 500;
}
.cards-carousel .links a:visited {
color: #000;
}
.cards-carousel .links {
position: relative;
display: block;
background: #d4af50;
overflow: hidden;
transition: 1s all ease;
}
.cards-carousel .btn {
position: relative;
display: inline-block;
padding: 0.9rem 1.2rem;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 0.6s ease;
}
.cards-carousel .btn a:hover {
color: #fff !important;
}
.cards-carousel .btn:before {
background-color: #161443;
color: #fff;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.cards-carousel .btn:before {
width: 100%;
height: 0;
}
.cards-carousel .btn:hover::before {
height: 100%;
}
https://jsfiddle.net/2pb8j3uq/1/#&togetherjs=9snABpHcsk
I tried to change everthing I can, I’m just new in coding and still learning. Thank you so much for help and guide to solve my questions
You need to sign in to view this answers