Pure CSS Tab Menu

by zerrax

HTML

<header>
  <a>hello</a>
</header>
<div class="tab-container">
    <label class="tab-title" for="tab-1">Tab #1</label>
    <label class="tab-title" for="tab-2">Tab #2</label>
    <label class="tab-title" for="tab-3">Tab #3</label>
    <input type="radio" name="tab" class="hide" id="tab-1" checked>
    <ul class="tab-content">
     <h2>Wellcome</h2>
     
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
    </ul>
    <input type="radio" name="tab" class="hide" id="tab-2">
    <div class="tab-content">
    <h2>
    gallery
    </h2>
        <ul class="image-gallery desktop-cols-6 tablet-cols-3 mobile-cols-2">
	<li class="gallery-item">
  <a tabindex="1">
  <i style="" tabindex="0">X</i>
		<img src="http://marsminds.com/wp-content/uploads/2015/08/ig-sample-01.jpg" alt="">
    </a>
	</li>
	

</ul>
    </div>
    <input type="radio" name="tab" class="hide" id="tab-3">
    <ul class="tab-content">
        <li><a href="#">efg</a></li>
        <li><a href="#">efg</a></li>
        <li><a href="#">efg</a></li>
    </ul>
</div>

CSS

body{
  padding:5px 25px;
  margin:0;
   background-color: #212121;
}
header{
  height:35px;
}
.hide {
    display: none;
}
.tab-container{
  display:grid;
    grid-template-columns: auto;

}
.tab-title {
    cursor: pointer;
    display: inline-block;
    width: 100px;
      padding: 8px;
 // margin-bottom: 7px;
  color: #ffffff;
  border-left: solid 2px #33b5e5;
  z-index:1;
}
input[type="radio"] + .tab-content {
    display: none;
    
}
input[type="radio"]:checked + .tab-content {
    display: block;
    padding-left: 110px;
    padding-right: 50px;
    position:absolute;
    height: calc( 100% - 40px)
}
/*Image Gallery*/
.image-gallery{
	font-size:0;
	padding:20px;
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.image-gallery .gallery-item{
	display:inline-block;
	margin:0 0 15px 0;
	width:100%;
  position:relative;
  height:110px;
   
}
.image-gallery .gallery-item a:focus{

position: fixed;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
z-index:2;

}
.image-gallery .gallery-item img {width: 100%;}
.image-gallery .gallery-item a i{
  font-size: 25px;

color: white;

top: 10px;

position: absolute;
display:none;
z-index: 999;

text-align: right;
cursor:pointer;
width: 96%;
}
.image-gallery .gallery-item a i:hover{
 color: rgba(255,255,255,0.8)
}
.image-gallery .gallery-item a:focus i{
  display:block;

}

.gallery-item{
  width: 100%;
}
.image-gallery .gallery-item a:focus img,
.gallery a:focus img {
     cursor: default;
    // width: 90%;
    position: fixed;
    top: 10%;

    bottom: 20%.9 z-index:25;
    -webkit-box-shadow: 10px 10px 53px 200px rgba(0,0,0,0.95);
    -moz-box-shadow: 10px 10px 53px 200px rgba(0,0,0,0.95);
    box-shadow: 10px 10px 53px 200px rgba(0,0,0,0.95);
    transition-duration: 0.5s;
    overflow: hidden;
    width: 100%;
    max-height: 350px;

}


/

.image-gallery .gallery-item img{
	width:100%;
}

/*************************************/
/************MEDIA...