<script>

var project = $(‚.project‘);
var pLink = project.find(‚.project__link‘);
var pBg = project.find(‚.project__bg-item‘);

var changeBg = function() {
var thisProject = $(this);
var thisProjectIndex = thisProject.parent().index();
var thisProjectBg = pBg.eq(thisProjectIndex);

// hide all backgrounds and fade out project names
pBg.removeClass(‚project__bg-item–active‘);
pLink.css(‚opacity‘, ‚0.4‘);

// reveal the project bg you hovered over and increase opacity for that name
thisProject.css(‚opacity‘, ‚1‘);
thisProjectBg.addClass(‚project__bg-item–active‘);
};

var showFirst = function() {
// when the page loads reveal the first project
pLink.css(‚opacity‘, ‚0.4‘);
pLink.parent().first().children().css(‚opacity‘, ‚1‘);
pBg.first().addClass(‚project__bg-item–active‘);
}

var init = function() {
$(document).on(‚ready‘, showFirst);
pLink.on(‚mouseenter‘, changeBg);
};

init();

</script>

 

<div class=“project“>
<ul class=“project__list“>
<li class=“project__item“><a href=““ class=“project__link“>Retro</a></li>
<li class=“project__item“><a href=““ class=“project__link“>Tofu</a></li>
<li class=“project__item“><a href=““ class=“project__link“>Banjo</a></li>
<li class=“project__item“><a href=““ class=“project__link“>Pitchfork</a></li>
</ul>

<ul class=“project__bg-list“>
<li class=“project__bg-item“></li>
<li class=“project__bg-item“></li>
<li class=“project__bg-item“></li>
<li class=“project__bg-item“></li>
</ul>
</div>

<main>
<h1><a href=“http://ettrics.com“ target=“_blank“>Ettrics</a></h1>
<p>Full-screen image layer viewer. <a href=“http://ettrics.com/code/full-screen-image-layer-viewer/“ target=“blank“>Read more on Ettrics</a></p>
</main>