Instafeed.js Hover Rollovers

index.html

<div id="instafeed"></div>

Instafeed.js Hover Rollovers.markdown

Instafeed.js Hover Rollovers

Instagram integration using Instafeed.js (http://instafeedjs.com) and Font Awesome (http://fortawesome.github.io/Font-Awesome/)

Currently running on for the City Grounds homepage: (http://www.citygrounds.com)

Forked from Kevin Coleman's Pen Instafeed.js Hover Rollovers.

Forked from Kevin Coleman's Pen Instafeed.js Hover Rollovers.

A Pen by ian hobbs on CodePen.

License.

script.js

  	var userFeed = new Instafeed({
	 	get: 'user',
		limit: "5",
		resolution: "thumbnail",
	 	userId: 196124197,
	 	accessToken: '196124197.467ede5.158a13aab2174e10964a1541c5fcb3a9',
 template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="rollover"><i class="fa fa-instagram"></i> &nbsp;|&nbsp; <img style="height: 28px; width: 28px; padding-bottom: 0px;" src="http://www.citygrounds.com/images/menu_icon_cg_logo.png"></div></a>'
});
	userFeed.run();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://f.cl.ly/items/3o2z3b1R3G250G1t0w2L/instafeed.min.js"></script>

style.css

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

#instafeed {
	width: 990px;
	left: -5px;
}

#instafeed a {
	padding: 5px;
  position:relative;
  display: inline-block;
}

#instafeed img {
	height:150px;
	width:150px;
}


#instafeed .rollover {
  background:rgba(200, 0, 129, 0.4);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:28px;
  position:absolute;
  color:#ffffff;
  right:5px;
  top:5px;
  left:5px;
  opacity:0;
  text-align:center;
  line-height:150px;
}

#instafeed a:hover .rollover {
  opacity:1;
}