How to apply a hover effect to 2 different elements

Question

I want to apply the hover effect to two separate elements at the same time. This means that when you hover over one element, the hover effect is applied to the other element as well. The two elements are one simple text and one image. Isn't there a way to do it only with html and css? Or do I have to use javascript?

Thank you very much!

html

<div class="project">
<div class="img_overflow">
 <div class="img_scale">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
</div>
<h1 class="underline">Text Underline</h1>
</div>

css

.project h1 {font-size: 26px;background-image: linear-gradient(transparent 60%, #F8CD07 40%);background-repeat: no-repeat;background-size: 10% 100%;transition: background-size 0.8s;color: #000;cursor: pointer;}
.img_overflow {width:200px; height: 200px; overflow:hidden;}
.project img {width:100%;height:auto;}
.img_scale {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all 0.6s ease-out;}
.project:hover > .img_scale{transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);}
.project:hover > .underline{background-size: 100% 100%;}

enter link description here https://jsfiddle.net/jwpg018241/etobr4pg/57/

score 0 · Accepted Answer · answered Jul 22 '21 at 06:59

Delete > then all work like:

.project h1 {
  font-size: 26px;
  background-image: linear-gradient(transparent 60%, #F8CD07 40%);
  background-repeat: no-repeat;
  background-size: 10% 100%;
  transition: background-size 0.8s;
  color: #000;
  cursor: pointer;
}

.img_overflow {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.project img {
  width: 100%;
  height: auto;
}

.img_scale {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.6s ease-out;
}

.project:hover .img_scale {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.project:hover .underline {
  background-size: 100% 100%;
}

<div class="project">
  <div class="img_overflow">
    <div class="img_scale">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
    </div>
  </div>
  <h1 class="underline">Text Underline</h1>
</div>

How to apply a hover effect to 2 different elements

1 Answers1