A CodePen by dommagnifico. Hover Lover - Hover over a thing, so that thing underneith does stuff

index.html

<link href='http://fonts.googleapis.com/css?family=Arbutus+Slab' rel='stylesheet' type='text/css'>

<article class="focus__list">
			<div class="focus__area--wrap">
				<div class="focus__area">
					<div class="focus__icon">&amp;</div>
					<div class="focus__title">
						Ampersand
					</div>
				</div> <!-- //__area -->
				<div class="focus__area orange">
					<div class="focus__icon">!</div>
					<div class="focus__title">
						BANG!
					</div>
				</div> <!-- //__area -->
				<div class="focus__area">
					<div class="focus__icon">%</div>
					<div class="focus__title">
						Per Cent
					</div>
				</div> <!-- //__area -->
				<div class="focus__area">
					<div class="focus__icon">$</div>
					<div class="focus__title">
						Doll Hairs
					</div>
				</div> <!-- //__area -->
				<div class="focus__area">
					<div class="focus__icon">#</div>
					<div class="focus__title">
						Hashtag Awesome
					</div>
				</div> <!-- //__area -->
			</div>
</article>

<article class="focus__descriptions">
  <div class="focus__description active">
    <h3>Cool Stuff Ampersand</h3>
  </div> <!-- //focus__description -->
  <div class="focus__description">
    <h3>BANG!BANG!BANG!BANG!BANG!</h3>
  </div> <!-- //focus__description -->
  <div class="focus__description">
    <h3>100% Super cool.</h3>
  </div> <!-- //focus__description -->
  <div class="focus__description">
    <h3>It's an S with a line through it.</h3>
  </div> <!-- //focus__description -->
  <div class="focus__description">
    <h3>#code #developer #scss #hastag</h3>
  </div> <!-- //focus__description -->
</article>

script.js

$(document).ready(function(){
	$('div.focus__area').hover(function(){
		$('div.focus__description').eq($(this).index()).addClass('active').siblings().removeClass('active');
		$(this).addClass('pink').siblings().removeClass('pink');
	});
})

style.scss

@import "compass";
body{
  background:#2b2b2b;
  color:#fefefe;
  font-family: 'Arbutus Slab', serif;
}

.pink {
  color:#ff004e;
}

.focus__list {
  text-align:center;
	clear:both;
	padding:20px 0 0 0;
	p {
		font:{size:24px;}
		margin:0;
		padding:0;
	}
}

.focus__area{
	@include transition(400ms);
	display:inline-block;
	text-align:center;
  padding:0 20px;
	cursor:pointer;
	&:hover {
		color:#ff004e;
	}
	.focus__icon {
		font:{size:150px;}
	}
}
.focus__descriptions{
	position:relative;
	height:110px;
}
.focus__description {
	@include transition(400ms);
	position:absolute;
	width:100%; height:0;
	text-align:center;
	opacity:0;
	visibility:hidden;
	&.active {
		height:auto;
		opacity:1;
		visibility:visible;
	}
	h3 {
		font:{size:32px;}
	}
}