Assigning a CSS style to a specific element within a div

Question

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>

Answer 1

In doing .flexbox-container :hover you will apply to any element within .flexbox-container, you need to specify which type of element should receive the effect, use .flexbox-container card-home-main:hover

Add align-items: start; in the .flexbox-container so that only the element receiving the :hover increase. That’s why, by default, flexbox leaves child elements at the same height