Change child div position on parent hover [duplicate] - html

Question

This question already has answers here:
What does + mean in CSS? [duplicate]
(4 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
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">Read more <i class="arrow"></i></div>
</div>
</div>

Answer 1

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">Read more <i class="arrow"></i></div>
</div>
</div>

Answer 2

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">Read more <i class="arrow"></i></div>
</div>
</div>