Hover Content Tab Index

tab-index.css

/*
Tab Index Styles
---------------------------------------------------------------------------------------------------- */

.tab-index-list {
    margin-top: 0px;
}

.tab-index {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
}

.tab-index-1 {}

.tab-index-2 {}

.tab-index-3 {}

.tab-index-4 {}

.tab-index-5 {}

.tab-index-icon {
    width: 200px;
    height: 200px;
    border: 20px solid #fff;
    border-radius: 50%;
    background: #7fb8dd;
}

.tab-index-1 .tab-index-icon {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
}

.tab-index-1.active .tab-index-icon {
    background: url("") #6fc1dd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
    border-color: #bfdbee;
    
}

.tab-index-2 .tab-index-icon {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
}

.tab-index-2.active .tab-index-icon {
    background: url("") #6fc1dd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
    border-color: #bfdbee;
    
}

.tab-index-3 .tab-index-icon {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
}

.tab-index-3.active .tab-index-icon {
    background: url("") #6fc1dd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
    border-color: #bfdbee;
    
}

.tab-index-4 .tab-index-icon {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
}

.tab-index-4.active .tab-index-icon {
    background: url("") #6fc1dd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
    border-color: #bfdbee;
}

.tab-index-5 .tab-index-icon {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
}

.tab-index-5.active .tab-index-icon {
    background: url("") #6fc1dd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 72px;
    border-color: #bfdbee;
}

.tab-content-list {
    margin-top: 40px;
}

.tab-content {
    display: none;
    list-style-type: none;
    text-align: center;
}

.tab-content-1 {
    display: block;
}

.tab-content-2 {
    
}

.tab-content-3 {
    
}

.tab-content-4 {
    
}

.tab-content-5 {
    
}

.tab-title {
	text-align: center;
	font-size: 22px;
	font-weight: 600;
}

.tab-index.active .tab-title {
	color: #0071bb;
	font-weight: 700;
}

.tab-contents {
	font-size: 18px;
	padding-top: 20px;
}

tab-index.html

<ul class="tab-index-list">
  <li class="tab-index tab-index-1 active" data-target=".tab-content-1">
    <div class="tab-index-icon"></div>
    <div class="tab-title">TITLE HERE</div>
  </li>
</ul>
    
<ul class="tab-content-list">
  <li class="tab-content tab-content-1">
    <div class="tab-contents">
    TAB CONTENT
    </div>
  </li>
</ul>

tab-index.js

jQuery(function($){
    $(document).ready(function() {
        $('.tab-index').hover(function() {
            var $this = $(this), 
                $target = $($this.data('target'));

            $this.addClass('active');
            $('.tab-index').not($this).removeClass('active');

            $target.fadeIn();
            $('.tab-content').not($target).hide();
        }, function() {
            
        });
    });
});