Skip to content

Instantly share code, notes, and snippets.

@Mashpy
Created November 12, 2015 06:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Mashpy/656d1fa5948f18d003fb to your computer and use it in GitHub Desktop.
<div class="staff-member" >
<div class="span2">
<img alt="Per L. Saxegaard : Founder and Executive Chairman" src="http://bfp-new-mashpy-1-1.c9users.io/wp-content/uploads/2014/04/V6M4083.jpg" class="staff-member-photo">
<div class="staff-member-info-wrap">
<h3 class="staff-member-name">Per L. Saxegaard</h3>
<h4 class="staff-member-position">Founder and Executive Chairman</h4>
<a title="Email Per L. Saxegaard" href="mailto:per@businessforpeace.org" class="staff-member-email">per@businessforpeace.org</a>
</div>
</div>
</div>
.staff-member .span2 {
display: inline-block;
background: black;
padding: 0;
}
.staff-member .span2 .staff-member-info-wrap{
display:none;
position:absolute;
top:0px; left:0px;
float:left;
color:white
}
.staff-member .span2 img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.staff-member .span2:hover img {
opacity: 0.7;
}
.staff-member-photo {width: 200px}
$('.staff-member .span2').hover(
function(){
$(this).find('.staff-member-info-wrap').fadeIn(300);
},
function(){
$(this).find('.staff-member-info-wrap').fadeOut(300);
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment