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
Leave feedback about this