How to apply some style for the element before when hovering on the current element

Question

I am getting a problem with the following code:

<div class="background">
  <div class="img-content">
    <p>Some text here...</p>
  </div>
  <img src="the_image.png" class="img-class">
</div>

The div with img-content class is displayed on top of the image when i'm hovering on top of it. In the same time i apply an opacity to the image so i displayed a hidden background to give some colour effects.

The CSS is the following:

.background {
  height:100px;
  width:100px;
  background-color: blue;
  position:relative;
  } 

div.img-content {
  position:absolute;
  top:20px;
  color:white;
  display:none;
}

.background:hover div.img-content {
  position:absolute;
  top:20px;
  color:white;
  display:block;
}

img.img-class {
  opacity:0.3;
}

With the current HTML, when i hover on top of the image, everything is displayed according to specifications except that the opacity gets applied alsso on the div.img-content

When i inverse the order of the element inside the div.background (code following), everything is displayed as specifications except when i hover on top of the div.img-content, then the opcity of the image gets back to 1 (instead of 0.3)

<div class="background">
  <img src="the_image.png" class="img-class">
  <div class="img-content">
    <p>Some text here...</p>
  </div>
</div>

So now, my idea is to apply the opacity 0.3 on the image when i hover on top of the div.img-content( for the code right above). Or, any other solution that could be applied for the first HTML code of the question. With CSS only!

Thanks!