0
Hello!
I’m doing a project and I have a div flexbox-container
who has three div daughters, card-home-main
.
I would like to make an effect by passing the mouse on card-home-main
, but when I do this, by hovering the mouse over one, all the other two also receive the effect simultaneously. Also, all Divs within card-home-main
also receive the effect, so that if you hover over an image inside it, the image itself will receive the effect.
How to limit that only the div whose mouse is on, receives the effect at a time? And also limit that the components within it do not receive it.
I left an example of what I am doing in the example below
.div-rectangle-main {
width: 100%;
height: 100%;
left: 100%;
top: 492px;
background: linear-gradient(192deg, #3D4554 -10.36%, #242B36 45.63%, #1D1D1D 117.21%);
}
.div-rectangle-main .main-logo {
display: block;
padding-top: 79px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0%;
width: 250px;
}
.div-rectangle-main .main-title {
font-family: Nunito Sans;
font-style: normal;
font-weight: 800;
margin-top: 36px;
font-size: 40px;
line-height: 55px;
text-align: center;
color: #2CC3D5;
}
.div-rectangle-main .main-subtitle {
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
margin-top: 20px;
margin-bottom: 200px;
font-size: 1.25rem;
line-height: 200%;
text-align: center;
}
.div-rectangle-main .main-subtitle .main-subsubtitle {
font-weight: normal;
}
.flexbox-container {
display: flex;
justify-content: center;
margin-bottom: 20%;
}
.flexbox-container .card-home-main {
width: 18%;
height: auto;
margin-top: -9%;
margin-left: 5.8%;
background: #FFFFFF;
border: 1px solid #EAEEEE;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.15);
border-radius: 8px;
display: flex;
flex-direction: column;
transition: height 1000ms;
}
.flexbox-container .card-home-main:nth-of-type(1) {
margin-left: 0.8%;
}
.flexbox-container :hover {
height: 400px;
}
.card-home-main .card-img {
height: auto;
width: auto;
margin-left: 25%;
margin-top: 10%;
}
.section-icon-circle-card {
border-radius: 100%;
width: 108px;
height: 108px;
padding: 18px;
margin-top: 4.95%;
margin-bottom: 4.95%;
margin-left: 6.42%;
}
.section-icon-circle-card--bot {
background: rgba(44, 195, 213, 0.2);
}
.section-icon-circle-card--watermelon {
background: rgba(246, 102, 137, 0.2)
}
.section-icon-circle-card--warning {
background: rgba(255, 207, 51, 0.2);
}
.card-home-main .card-info {
float: left;
height: 100%;
width: 100%;
max-width: 100% !important;
padding-top: 0%;
overflow: auto;
}
.card-home-main .card-info .card-title {
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 1.5rem;
line-height: 120%;
color: #607B99;
width: 50%;
margin-left: 25%;
text-align: center;
}
.card-home-main .card-info .card-icon {
margin-left: 40%;
}
.card-home-main .card-info .card-text {
display: none;
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 0.75rem;
line-height: 120%;
color: #3D4554;
width: fit-content;
margin-right: 20%;
}
.card-home-main .card-info .card-text-mobile {
display: none;
}
.buttton-card:hover {
background: #2498A8;
color: #FFFFFF;
}
<div>
<div class="div-rectangle-main">
<h1 class="main-title"> Lore lore lore!</h1>
<div class="main-subtitle">
lore lore lore
<p class="main-subsubtitle">lore lore lore lore =)</p>
</div>
</div>
<div class="flexbox-container">
<div class="card-home-main" id="card1">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--bot">
<img src="img/illustrations/Estrela-1.svg" />
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>Basico</h3>
</div>
<p class="card-text">lore lore lore.</p>
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text-mobile">lore lore lore</p>
</div>
</div>
<div class="card-home-main" id="card2">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--watermelon">
<img src="img/illustrations/Estrela-2.svg" />
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>Inter</h3>
</div>
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text">lore lore lore.</p>
<p class="card-text-mobile">Lore lore lore.</p>
</div>
</div>
<div class="card-home-main" id="card3">
<div class="card-img">
<div class="section-icon-circle-card section-icon-circle-card--warning">
<img src="img/illustrations/Estrela-3.svg" />
</div>
</div>
<div class="card-info">
<div class="card-title">
<h3>Avan</h3>
</div>
<div class="card-icon">
<BlipIcon name="arrow-ball-down-solid" class="bp-fs-1 bp-fill-bot"></BlipIcon>
</div>
<p class="card-text">Lore lore lore</p>
<p class="card-text-mobile">lore lore lore lore</p>
</div>
</div>
</div>
</div>
I had this notion, but I didn’t know how to solve it. Thank you, the
align-items: start;
worked!– Bruno Camarda
If the answer solved your problem, accept it by clicking on
– Costamilam