CSS for hover to change same-level element

Question

I am making a little photo gallery and I want there to be an effect on the image when you hover either the image or the text link. You can see an example here:

http://codepen.io/anon/pen/qarvc

Right now, if you hover over any of the entire parent div it triggers the hover effect I want for the image and image span. The problem though, is that if you hover over the empty space to the right of the h4 a, it still triggers the hover but the user can't actually click a link.

Now in the actual work, I have another element floated to the right of the h4 a, so it is not a solution to just make the h4 aa block.

How can I use css to target .gallery-image when h4 a is hovered?

html

<div class="galleries">

<div class="gallery">
    <div class="gallery-image">
        <a href="" title="view photo gallery"><span class=""></span></a>
        <a href="" title="view photo gallery"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTEH-vPVcz7F8Yb18iLtDEjnZsbWfYG4lCFdyhKMRYax1krBnRD" alt="" /></a>
    </div>
    <h4><a href="" title="view photo gallery">gallery name</a></h4>
</div><!-- end div.gallery -->

css

#content-full {
width:960px;
padding:30px 0 0;
}
.clearboth {
clear:both;
height:0;
}
.gallery {
position:relative;
float:left;
width:300px;
margin:0 10px 35px;
}
.gallery-image span {
background:url("http://inventionhome.com/wp-content/uploads/2014/07/zoom.png") no-repeat center center;
width:90px;
height:90px;
display:none;
z-index:999;
margin:auto;
position:absolute;
top:-50px; left:0; bottom:0; right:0;
}
.gallery-image {
background-color:#4576a4;
}
.gallery-image:hover span, .gallery:hover .gallery-image span {
display:block;
}
.gallery-image img {
display:block;
width:100%;
height:230px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.gallery-image:hover img, .gallery:hover .gallery-image img {
opacity:0.2;
}
.galleries h4 {
margin-top:5px;
line-height:27px;
}
.galleries h4 a {
color:#142533;
}
.galleries h4 a:hover {
text-decoration:none;
}

Answer 1

The issue you are running into with using only CSS is that there doesn't exist a CSS selector to select the previous or parent element. You can work around this stipulation if your images are going to be consistent sizes (height), you could put the <h4> ahead of the <div class="gallery-image"> and position it below the image with position: absolute; -- allowing your to use the CSS ~ selector to have hover events affect the image because it is after the element in the DOM. Also, I alleviated your white space selector issue with display: inline-block; :

<div class="gallery">
    <h4>...</h4>
    <div class="gallery-image">...</div>
</div>

.gallery {
  position:relative;
}  
.gallery-image:hover span {
  display:block;
}
.gallery-image:hover img {
  opacity:0.2;
}
.galleries h4 {
  margin-top:5px;
  line-height:27px;
  display: inline-block;
  position: absolute;
  top: 230px;
} 
.galleries h4:hover~.gallery-image img {
  opacity:0.2;
}
.galleries h4:hover~.gallery-image span {
  display: block;
}

-- I only included edited CSS above

JSFIDDLE

Answer 2

I'm bringing another answer, the symbol " + " also works when it comes to apply a style to an element of the same level in markup hierarchy :

The CSS modified :

.galleries h4:hover + .gallery-image img {
  opacity:0.2;
}
.galleries h4:hover + .gallery-image span {
  display: block;
}

It works only if the element we are targeting is immediatly positionned after the initial . In our case it works, just after h4:hover, we find .gallery-image.