CodePen

HTML

            
              <div class="image-gallery">
  <div class="title">CSS Image Gallery - NO JS! - with transition</div>
  <div class="big-image">           
          <img id="html5" src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s1600/html5.png" />
          <img id="css3" src="http://1.bp.blogspot.com/-y7D7mYH3nLE/UFH9cjwJMgI/AAAAAAAAFMQ/5CYN5eyxk14/s1600/css3.png" />
              <img id="less" src="http://3.bp.blogspot.com/-VW9cKTGdGT0/UFH7YJPTjdI/AAAAAAAAFMI/tf_X_N9IMOU/s1600/less.png" />
                  <img id="modern" src="http://2.bp.blogspot.com/-PYBI4ZXF2nM/UFH6ZtVdtDI/AAAAAAAAFMA/Ru7hsk3yNj0/s1600/modernizr2.png" />
              <img id="default" src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s1600/html5.png" />
  </div>
  <ul>
    <li>
      <a href="#html5"><img  src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s72-c/html5.png" /></a></li>
    <li>
      <a href="#css3"><img  src="http://1.bp.blogspot.com/-y7D7mYH3nLE/UFH9cjwJMgI/AAAAAAAAFMQ/5CYN5eyxk14/s72-c/css3.png" /></a>
    </li>
    <li>
       <a href="#less"><img  src="http://3.bp.blogspot.com/-VW9cKTGdGT0/UFH7YJPTjdI/AAAAAAAAFMI/tf_X_N9IMOU/s72-c/less.png" /></a>
    </li>
    <li>
       <a href="#modern"><img  src="http://2.bp.blogspot.com/-PYBI4ZXF2nM/UFH6ZtVdtDI/AAAAAAAAFMA/Ru7hsk3yNj0/s72-c/modernizr2.png" /></a>
    </li>
    <a href="https://www.facebook.com/groups/css.master/" target="_blank" class="by">CSS Masters - CSS facebook group ( Done By Elad Shechter)</a>
</div>
            
          
!

CSS

            
              .image-gallery{
  width:300px;
  background-color:#eec1a6;
  padding:20px;
  border-radius:20px;
  border:solid 1px #c5c5c5;
}
.image-gallery .big-image{
  width:159px;
  height:159px;
  border:solid 1px gray;
  padding:10px;
  margin:0 auto;
  background-color:white;  
  position:relative;
}
.image-gallery .big-image img{
  opacity:0;position:absolute;left:10px;top:10px;
  margin:0 auto;
  transition: opacity 350ms;
-moz-transition: opacity 350ms; /* Firefox 4 */
-webkit-transition: opacity 350ms; /* Safari and Chrome */
-o-transition: opacity 350ms; /* Opera */
}
/*Selected image display*/
.image-gallery .big-image img:target{opacity:1;}
/*on select image dusplay none the default image*/
.image-gallery .big-image img:target ~ img#default{opacity:0;}
/*Shoe Default Image in first load*/
.image-gallery .big-image img#default{opacity:1;}

.image-gallery ul{margin-top:15px;}
.image-gallery li{float:left;
  background-color:rgba(255,255,255,0.5);margin-right:3px;}
.image-gallery li:hover{
  background-color:rgba(255,255,255,0.8);
}


/*other styles*/
.title{font-size:20px;font-weight:bold;color:#633317;text-align:center;margin-bottom:15px;}
.by{clear:both;display:block;font-size:12px;text-align:right;color:#633317;padding-top:5px;}
/*reset CSS*/
*{font-family:arial;}
ul,li{list-style:none;margin:0;padding:0;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................