When I hover over my card(box), I want the description text to move up 10px like shown in the pictures. However, the city name text and button also shift for some reason.
View card without hover (IMG) Here is with hover effect (IMG)
In the second image, you can see that the button moves up as well.
Below is the HTML code for the card containing the text, city name, and button:
<div class="cards_container">
<div class="card" id="card_oslo">
<p class="cardCityInfo">
Oslo is a cool place <br> where there are many <br>
tourists year-round. <br> So come visit.
</p>
<h4 class="card_text">Oslo</h4>
<a href="#"><h5 id="btn_card">See more</h5></a>
</div>
Here is the CSS code attempting to style and create the :hover effect on the description text within the cards. ".card:hover .cardCityInfo" is where the hover effect is being applied specifically to the text:
.cardCityInfo{
font-size: 1.1rem;
font-family: 'Nunito', sans-serif;
color: #fff;
text-align: center;
z-index: 5;
margin-top: 100px;
opacity: 0;
}
.card:hover{
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
transition: .5s;
}
.card:hover .cardCityInfo{
opacity: 0.9 !important;
transition: .5s;
margin-top: 90px;
}
.card:hover .card_text{
color: #fff;
transition: .5s;
}
This is how the card appears in CSS:
.card {
position:relative;
width: 315px;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
border-radius: 5px;
margin: 20px 10px;
float: left;
}