Skip to content

Instantly share code, notes, and snippets.

@travisdmathis
Created April 23, 2014 14:42
Show Gist options
  • Select an option

  • Save travisdmathis/11218000 to your computer and use it in GitHub Desktop.

Select an option

Save travisdmathis/11218000 to your computer and use it in GitHub Desktop.
Trying to check for figcaption height and if 100% scroll down to 10%
figure {
margin: 100px auto;
width: 479px;
height: 541px;
overflow: hidden;
position: relative;
}
figcaption {
position: absolute; display: block;
width: 479px;
height: 50px;
left: 0px;
bottom: 0px;
text-align: center;
color: #fff;
background-color: rgba(255,255,255,.8);
line-height: 50px;
transition: bottom 0.2s;
}
figcaption h3 {
font-size: 34px;
color: #ae1e22;
font-family: 'Antic', sans-serif;
padding-top: 5px;
}
figure:hover figcaption {
bottom: 0px;
height:100%;
}
<script>
var $figcaption = $("figcaption");
var fullHeight = $("figure:hover figcaption").css('height');
function checkForHeight() {
if ($figcaption.css('height') = fullHeight ) {
$('figure:hover figcaption').animate({ height:'10%' }, 500);
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment