Activate hover CSS of another class?

Question

In this code the CSS will make the Image "grow" when you hover over it. However , I'd like to make the image grow when you hover over the word "github" (next to the image).

<style>
    .hvr-grow {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
    }
    .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
</style>


<a href=""><img class ="hvr-grow" src="Images/github.png"> GitHub</a>

Would it work to apply your current styling to `a:hover .hvr-grow { ... }` and so on? Or is that not the result you want — kingdaro, Apr 26 '18 at 02:18

score 0 · Answer 1 · answered Apr 26 '18 at 02:41

0

Since the image is a child to the anchor element, you can use the child selector notation:

<style type="text/css">
a:hover .hvr-grow,
a:focus .hvr-grow,
a:active .hvr-grow {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

answered Apr 26 '18 at 02:41

John Zenith

472
5
10

score 0 · Answer 2 · answered Apr 26 '18 at 02:47

0

The other answer makes the image grow when you hover over both the image and the text... if you want it to grow ONLY when you hover over the text you can do something like this.

.github:hover ~ .image {
  transform: scale(1.1);
}

.image {
  width: 100px;
  height: 100px;
}

<a>
  <span class="github">Github</span>
  <img class="image" src="https://spin.atomicobject.com/wp-content/uploads/20171003153036/github-logo.png" />
</a>

answered Apr 26 '18 at 02:47

jscul

748
1
10
25

Thanks, this works best for my usecase. What does this tilda syntax mean in CSS? – James Apr 27 '18 at 16:32
You can think of it as a 'next to' selector. More info [here](https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean). – jscul Apr 27 '18 at 19:29

score 0 · Accepted Answer · answered Apr 26 '18 at 02:53

you can't access previous siblings with only css, so you can't make the image grow when you hover on GitHub after it, but you can put GitHub in a label and use float:right to make it appear in the right side of the image and use label:hover + img to make the image grow when you hover on the label :

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  width: 100px;
  height: 100px;
}

a label:hover+img,
.hvr-grow:focus,
.hvr-grow:active {
  transform: scale(1.1);
}

a label {
  float: right;
  font-size: 20px;
  margin-top: 30px;
}

a {
  display: block;
  width: 200px;
  height: 100px;
}

<a href="">
  <label>GitHub</label>
  <img class="hvr-grow" src="https://icon-icons.com/icons2/790/PNG/512/github_icon-icons.com_65450.png">
</a>

Activate hover CSS of another class?

3 Answers3