Hide An Image When Another Image/item Is Clicked Usin Css Only?

I need to make this happen, and to make it without using jQuery, I saw a working example, but when I coded my own it couldn't hide the image as I wanted. Here is the line from .cs

Solution 1:

Here is the CSS working code.Where I've added a tag. Right now in your code you included all img tag should closed and appear which include the thumb version as well.

So I add a more Specificity here.

Check the DEMO.

/*Selected image display*/.image-gallery.big-imagea:targetimg{display:block;}
/*on select image dusplay none the default image*/.image-gallery.big-imagea:target ~ img#default{display:none; width:1px;}
/*Shoe Default Image in first load*/.image-gallery.big-imageimg#default{display:block;}

Solution 2:

You need to target the A tag instead of IMG tag to make your coding working as per your requirements.

Sample CSS Code:

/*Selected image display*/.image-gallery.big-imagea:targetimg{display:block;}
/*on select image dusplay none the default image*/.image-gallery.big-imagea:target ~ img#default{display:none; width:1px;}
/*Shoe Default Image in first load*/.image-gallery.big-imageimg#default{display:block;}

Updated fiddle: http://jsfiddle.net/sq72x/1/

Edit: Make sure you update the HTML structure also, just need to move the ID attributes of big images to parent to A tags. You can check the updated HTML and CSS in the above specified fiddle and let me know if you need any clarification.

Solution 3:

I found the original code worked, but the default image wouldn't disappear.

Putting the default image at the bottom and adding overflow: hidden to .big-image fixed that, however I then, for some reason, had the default image showing much further down the page (with part of it missing). I set top: -100px; which put it back where it should be, but now the top of the default image appeared in my gallery! So, one more step, gave all other images the class .mainpic

.mainpic {position: relative; z-index: 10;}

I gave the default the class .defaultpic

.defaultpic  {position: relative; z-index: 5;}

The z-index means that .mainpic will always show in front of .defaultpic

A bit messy but it works!