JSFiddle - React, Tailwind, and code Playground

data-attributes love pseudo elements

by Jennifer Perrin

HTML

<div id="show">
  <ul>
    <li><a href="#" >Effect 1</a></li>
    <li><a href="#" >Effect 2</a></li>
    <li><a href="#" >Effect 3</a></li>
    <li><a href="#" >Effect 4</a></li>
    <li><a href="#" >Effect 5</a></li>
    <li><a href="#" >Effect 6</a></li>
    <li><a href="#" >Effect 7</a></li>
  </ul> 
  <div id="presentation">
    <a class="caption" href="http://dribbble.com/shots/1136019-Google-Fonts-flat-longshade-icon" data-title="Data-attribute ♥ :pseudo-elements"  data-description="Google Fonts flat long-shadow icons on my dribbble profile "><img src="http://lab.web-gate.fr/images/gfont.png" alt="Google Fonts flat long shadow icon"/></a>

<a class="caption" href="http://dribbble.com/shots/1145136-PatchworkLabs-Corporate-Branding-WIP" data-title="Data-attribute ♥ :pseudo-elements" data-description="A shot from the awesome work of Axel Hermann."><img src="http://lab.web-gate.fr/images/axelHermann.png" alt="Illustration of Axel Hermann"/></a>    

<a class="caption" href="http://dribbble.com/shots/1091421-Infographic-resume-PSD" data-title="Data-attribute ♥ :pseudo-elements" data-description="An infographic resume made by @KevinCdnc."><img src="http://lab.web-gate.fr/images/cvKev" alt="Infographic resume .PSD of Kevin Cudennec"/></a>   
  </div>
  </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #666;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing:antialiased}

a {
    text-decoration: none;
    outline: none;
}

a img {
    border: none;
}

.caption {
    -webkit-backface-visibility: hidden; /* prevent flash when embedding fiddle */
	display: inline-block;
	position: relative;
	margin: 10px;
	overflow: hidden;
	background: #000;
  perspective:120px;/*For the .effect6 | .effect7 */
}

.caption img {
	display: block;
  width:260px;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.caption:hover img {
	opacity: 0.5;
}

.caption::after,
.caption::before {
	position: absolute;
	width: 100%;
	height: 50%;
;
  color: #fff;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity .3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out, opacity .3s ease-in-out;
	transition: transform 0.3s ease-in-out, opacity .3s ease-in-out; 
}

.caption::after {
	content: attr(data-title);
	top: 0;
	background: #af4efb;
  font-size:1.4em;
  font-weight: 300;
	padding: 30px;
    opacity:0;
}

.caption::before {
	content: ' ' attr(data-description) '';
	top: 50%;
	background: #1f0282;
	font-size: 14px;
	padding: 20px;
  opacity:0;
}
.caption:hover::after,
.caption:hover::before {
	  opacity:1;  
}
/* Effects */

/* Effect 1*/
.effect1 .caption::after {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.effect1 .caption::before {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}
.effect1 .caption:hover::after,
.effect1 .caption:hover::before {
	-webkit-transform:...

JavaScript

$(document).ready(function(){
  var item = $('#show ul li');
  var butOne = $('ul li');
  var butTwo = $('ul li:nth-child(2)');
  var butThree = $('ul li:nth-child(3)');
  var butFour = $('ul li:nth-child(4)');
  var butFive = $('ul li:nth-child(5)');
  var butSix = $('ul li:nth-child(6)');
  var butSeven = $('ul li:nth-child(7)');
  
  var pres = $("#presentation")
  
  item.on('click', function(){
    $(this).addClass('active');
    $('*').not($(this)).removeClass('active');
  });
  
  butOne.on('click', function(event){
    event.preventDefault();
    pres.addClass('effect1');
    pres.removeClass('effect2');
    pres.removeClass('effect3');
    pres.removeClass('effect4');
    pres.removeClass('effect5');
     pres.removeClass('effect6');
    pres.removeClass('effect7');
 });
   butTwo.on('click', function(event){
    event.preventDefault();
    pres.addClass('effect2');
    pres.removeClass('effect1');
    pres.removeClass('effect3');
    pres.removeClass('effect4');     
    pres.removeClass('effect5');
    pres.removeClass('effect6');
    pres.removeClass('effect7');
  });
   butThree.on('click', function(event){
    event.preventDefault();
    pres.addClass('effect3');
    pres.removeClass('effect1');
    pres.removeClass('effect2');
    pres.removeClass('effect4');
    pres.removeClass('effect5');
    pres.removeClass('effect6');
    pres.removeClass('effect7');
  });
   butFour.on('click', function(event){
    event.preventDefault();
    pres.addClass('effect4');
    pres.removeClass('effect2');
    pres.removeClass('effect3');
    pres.removeClass('effect1');
    pres.removeClass('effect5');
    pres.removeClass('effect6');
    pres.removeClass('effect7');
  });
  butFive.on('click', function(event){
    event.preventDefault();
    pres.addClass('effect5');
    pres.removeClass('effect2');
    pres.removeClass('effect3');
    pres.removeClass('effect1');
    pres.removeClass('effect4');
    pres.removeClass('effect6');
    pres.removeClass('effect7');
...