Change child div position on parent hover

Question

On parent div hover, I want it's two child div's to move position via translate.

I've tried to form my code based on this approach, but when applying the code to practise, it doesn't work for me, wondering why?

/* HOVER DEFINED HERE */

.cta-wrapper:hover + .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover ~ .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

Any specific reason why you're using `+` and `~` in your css? — Alex, Jun 29 '18 at 10:00

score 0 · Answer 1 · answered Jun 29 '18 at 09:59

Your selectors are incorrect for the hover. The selectors you've got aren't targeting child elements, they're targeting elements after the wrapper.

This should work:

/* HOVER DEFINED HERE */

.cta-wrapper:hover .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

score 0 · Answer 2 · answered Jun 29 '18 at 10:00

Because of .cta-image and .cta-text being children, you're using the wrong selectors to target them.

/* HOVER DEFINED HERE */

.cta-wrapper:hover .cta-image {
  transform: translate(20px, 5px);
}

.cta-wrapper:hover .cta-text {
  transform: translate(-10px, -10px);
}

/************************/

.cta-wrapper {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    width: 98.33333%;
    transition: all 0.3s;
    max-width: 1220px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.cta-wrapper a {
    text-decoration: none;
    text-align: left;
    color: #fff;
}
.cta-image {
    transition: all 0.2s;
    z-index: 100;
    position: relative;
}
.cta-text {
   width: 295px;
    text-align: left;
    padding: 30px;
    transform: translate(10px, -10px);
    transition: all 0.2s;
    background-color: #404262;
}
.card {
    display: block;
    border: none;
}

<div class="cta-wrapper">
  <a href="#" class="card inverse-text">


    <div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
  </a>
  <div class="cta-text">
    <a href="#" class="card inverse-text">
      <h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
      <p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
    </a>
    <div class="fake-button"><a href="#" class="card inverse-text"></a><a href="#">Read more </a><i class="arrow"></i></div>
  </div>

</div>

Change child div position on parent hover

2 Answers2