when hovering over an element, additional information appears that does not affect neighboring simil-CodePudding

I'm learning html and css and unfortunately I encountered difficulty when hovering over divs with displaying hidden elements. It is necessary that when you hover over the card, its color changes (which has already been done), the card increases and the hidden element appears. But unfortunately, when I hover over the first card, the other cards also increase in size, although the hidden information on them remains hidden. The only solution I found is if you remove the display:flex from the .services_cards element, but then the entire display of these cards collapses, but then they do not increase when hovering over one of them. I tried and through nth-child I did not succeed. Please tell me how to solve this problem. For a better understanding of the situation, it is better to watch in full screen mode, so my complexity will be more understandable.

.services__cards {
  margin-top: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}
.services__item:last-child {
  margin-right: 0;
}
.services__item:hover {
  background-color: #F78BB6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.services__item:hover .services__card-header, .services__item:hover .services__card-descr {
  color: #FFF;
}
.services__item:hover .services__learnmore {
  display: inline-block;
}
.services__card-header {
  margin-top: 38px;
  font-weight: 500;
  font-size: 34px;
  line-height: 72px;
  color: #56597A;
}
.services__card-descr {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #919299;
  text-align: center;
}
.services__learnmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 40px;
  display: none;
}
.services__learnmore span {
  margin-right: 5px;
}

<div >
          <div >
            <img src="images/cards/card-icon1.png" alt="card-icon image">
            <h3 >Design</h3>
            <div >a plan or drawing produced to show the look and function</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon2.png" alt="card-icon image">
            <h3 >Development</h3>
            <div >Development is defined as the process of growth or new</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon3.png" alt="card-icon image">
            <h3 >Branding</h3>
            <div >The marketing practice of creating a name, symbol or</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon4.png" alt="card-icon image">
            <h3 >Illustration</h3>
            <div >An illustration is a decoration, interpretation or visual</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
        </div>

CodePudding user response：

If I understand what you want, then you can simply resolve it by adding a height to your services__item css class:

.services__item {
  height: 100%; /* Just add it here */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}

.services__cards {
  margin-top: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services__item {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}
.services__item:last-child {
  margin-right: 0;
}
.services__item:hover {
  background-color: #F78BB6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.services__item:hover .services__card-header, .services__item:hover .services__card-descr {
  color: #FFF;
}
.services__item:hover .services__learnmore {
  display: inline-block;
}
.services__card-header {
  margin-top: 38px;
  font-weight: 500;
  font-size: 34px;
  line-height: 72px;
  color: #56597A;
}
.services__card-descr {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #919299;
  text-align: center;
}
.services__learnmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 40px;
  display: none;
}
.services__learnmore span {
  margin-right: 5px;
}

Working code snippet :

<div >
          <div >
            <img src="images/cards/card-icon1.png" alt="card-icon image">
            <h3 >Design</h3>
            <div >a plan or drawing produced to show the look and function</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon2.png" alt="card-icon image">
            <h3 >Development</h3>
            <div >Development is defined as the process of growth or new</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon3.png" alt="card-icon image">
            <h3 >Branding</h3>
            <div >The marketing practice of creating a name, symbol or</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div >
            <img src="images/cards/card-icon4.png" alt="card-icon image">
            <h3 >Illustration</h3>
            <div >An illustration is a decoration, interpretation or visual</div>
            <a href="/" ><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
        </div>