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 a a 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;
}

JRulle · Accepted Answer · 2014-07-22 19:44:43Z

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

Alex · Accepted Answer · 2015-04-23 14:56:33Z

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.

answered Apr 23, 2015 at 14:56

Alex

4,7194 gold badges26 silver badges46 bronze badges

4 Comments

Pardeep Jain Over a year ago

What if element (shown on hover) is positioned before the element (where action happened on hover)?

Alex Over a year ago

by before, do you mean in the same parent tag, or the zone affected by hover action is outside the parent tag of the hover zone ?

Pardeep Jain Over a year ago

please refer to this example - next.plnkr.co/edit/qaDOEQHjyxxADybi

Alex Over a year ago

@PardeepJain in your example, there is no way to select your previous sibling tag when hovering the next sibling tag in pure css. In your case, the trick would just be to do something like #a:hover #hello { display: block; } instead. As at page load, the only element contained in your #a div is the triangle, it has the exact same size. The only different behaviour is if you keep cursor on the hello text it will not disappear.

Collectives™ on Stack Overflow

CSS for hover to change same-level element

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related