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

PanfiliJ

New Member
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:<a href="http://stackoverflow.com/questions/11535269/gallery/01_CONSTRUCTS/Steam.jpg" class="shadowbox[CONSTRUCTS]" title="Steam"> <div class="rounded_corners thumbnail" style="width:240px; height:160px; background-image:url('gallery/01_CONSTRUCTS/thumbs/Steam_thumb.jpg');"> <span class="hover_dim">&nbsp;</span> <img class="thumb_new" src="http://stackoverflow.com/questions/11535269/images/new.png" alt="New" /> <a class="wall_hover" href="http://stackoverflow.com/questions/11535269/gallery/01_CONSTRUCTS/wallpaper/Steam.jpg"> <img class="wallpaper" src="http://stackoverflow.com/questions/11535269/images/monitor.png" alt="DownloadWallpaper" /> </a> <img class="zoom" src="http://stackoverflow.com/questions/11535269/images/zoom.png" alt="Zoom" /> </div></a>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;}
 
Back
Top