Tab Highlight

by Lorena Brito

HTML

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked >
        <label for="tab1">Duck</label>
        <div id="tab-content1" class="tab-content animated fadeIn">
            <div class="cff-wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOWzOk5hWTIj5BPfINkJ8tAl1vKJl7VnjIab0EyOq3nNFle-3Liw" title="Duck" alt="Duck" width="160" height="140"/></div></div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Duck Gone</label>
            <div id="tab-content2" class="tab-content animated fadeIn">
            <div class="cff-wrapper"><img src="https://patcegan.files.wordpress.com/2012/10/baby-duck-with-turtle-shell.jpg" title="Duck Gone" alt="Duck Gone" width="160" height="140"/>
                </div></div>
</li>
</ul>

CSS

.tabs input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      .tabs {
        width: auto;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
      }
      .tabs li{
        float: left;
		width:50%;
      }
      .tabs label {
        display: block;
		padding: 10px 20px;
		border-radius: 2px 2px 0 0;
		color: #000;
		font-size: 14px;
		font-weight: normal;
		background: #f7d26c;
		cursor: pointer;
		position: relative;
		top: -15px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
      }
      .tabs label:hover {
        background: rgba(220,220,220,1.00);
      }

    /*input:focus + label,
    input:active + label,*/
    input:checked + label {
       background:red;
    }
      
      [id^=tab]:checked ~ [id^=tab-content] {
          display: block;		
      }

      .tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        padding-top: 10px;
        color: white;
        position: absolute;
        top: 53px;
        left: 0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
      }
	  
	  .content-box p{
		color: #000 !important;
	}