Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make image visible on div:hover but not if another image in that div is hovered?

Make image visible on div:hover but not if another image in that div is hovered?

Problem

On my photography portfolio, I have thumbnails set up so that when you hover over the thumbnail (which are actually divs with background-image set to the thumbnail), a magnifying glass icon (which is an absolute-positioned img) is set via CSS to opacity:1.0.

However, for some images I'll have wallpapers available for download (the first image in the top-left is an example). To indicate this, I'll have a monitor icon (also absolute-positioned) inside this div as well (in the opposite corner). When this image is hovered over, I don't want the magnifying glass icon to appear.

EDIT:

Here is the actual HTML as generated by PHP:

    ZoomNewDownloadWallpaper

And the relevant CSS:

.thumbnail {
  display: block;
  position: relative;
  float: left;
}

.thumbnail:hover, .thumbnail:hover .zoom {
  opacity: 1.0;
  -webkit-opacity: 1.0;
  -moz-opacity: 1.0;
}

.thumbnail a.wall_hover + a .zoom {
  display: none;
}

.thumb_new {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 100;
}

.zoom {
  position: absolute;
  bottom: 3px;
  right: 3px;
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
}

.hover_dim {
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: background-color .25s ease-in;
  -webkit-transition: background-color .25s ease-in;
  -moz-transition: background-color .25s ease-in;
}

.thumbnail:hover .hover_dim {
  background-color: rgba(0,0,0,0);
}

.wallpaper {
  position: absolute;
  bottom: 3px;
  left: 3px;
}

.rounded_corners {
  padding: 0;
  margin: 0 5px 5px 0;
  border: 0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}
Problem courtesy of: NaOH

Solution

This should work if your structure is now correct. It is similar to Jane's answer, only it needs to be .wall_hover:hover not .wallpaper:hover.

.thumbnail:hover > .wall_hover:hover + .zoom {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}

Update Do to Your Break

You really need to learn some about what css selectors are actually doing, else you could break things again. So, let me help that education along. First, your "new" (current as of now) html structure is this:

    New ImageZoom InDownload Wallpaper

That will not work to achieve the effect you want (through pure css, anyway). You have to "swap" positions on the a tags. Short example (some code removed for brevity):

  
    

The reason for this is that css can make selections within elements or in certain cases of following elements, but not preceding elements or parent elements. So that is why the html order must change, because you want to affect .zoom with .wall_hover. We are doing that using the adjacent sibling selector + which selects only the element immediately following. So now, to get your css to work, you need:

.thumbnail:hover > .wall_hover:hover + .shadowbox[CONSTRUCTS] .zoom {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}

Note the change is because you wrapped .zoom in a parent element shadowbox[CONSTRUCTS]. What the above is saying is:

When .thumbnail is being hovered, then go to its immediate child (>) that is a class of .wall_hover, and if it is being hovered, then move to its immediately adjacent sibling and if that is a .shadowbox[CONSTRUCTS] class, then select its child element of .zoom. You could add a > before .zoom, but it is not necessary in your case (actually, it is really not necessary before .wall_hover in your case either, but I kept it for illustration purposes.

Solution courtesy of: ScottS

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Make image visible on div:hover but not if another image in that div is hovered?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×