Я пытаюсь сделать прозрачное наложение с некоторым текстом, появляющимся над изображением при щелчке. Я получил его, чтобы сделать анимацию, но мне нужно, чтобы она была снизу вверх, а не сверху вниз.Reverse jQuery Height Animation
HTML
=======
<!-- Element -->
<div class="char">
<div class="content">
<p id="nesstxt">ness is the bess</p>
<img id="ness" src="http://images3.wikia.nocookie.net/__cb20120802002608/ssb/images/2/25/Ness(Clear).png" />
<div id="nessoverlay"></div>
</div>
<div class="content">
<p id="pootxt">poo is my doo</p>
<img id="poo" width="215px" height="369px" src="http://images4.wikia.nocookie.net/__cb20081118173625/earthbound/images/4/4b/Poo_Clay.png" />
<div id="poooverlay"></div>
</div>
</div>
CSS
=======
div.char{
max-width:50%;
margin: 0 auto;
padding:0;
}
/*styling for effective overlay*/
#nessoverlay, #poooverlay"{
height: 100%;
background-color: black;
opacity: 0.7;
filter: alpha(opacity = 70);
position: absolute;
bottom: 0; left: 0; right: 0;
display: none;
z-index: 2;
}
/*box that holds it together*/
.content{
width:215px;
height:369px;
position:relative;
z-index:1;
display:inline;
padding:25px;
}
/*center txt and animate*/
#nesstxt, #pootxt{
position: absolute;
right: 0;
bottom: 0;
width: 70%;
color: white;
display: none;
z-index: 3;
}
jQuery
=======
$(document).ready(function(){
$('#nessoverlay, #nesstxt, #ness').click(function(){
$('#nessoverlay, #nesstxt').slideToggle();
});
});
$(document).ready(function(){
$('#poo, #poooverlay, #pootxt').click(function(){
$('#poooverlay, #pootxt').slideToggle();
});
});
Кроме того, мне нужно около 4 из фотографий с наложением рядный, которые я не могу понять, как заставить его работать. Любая помощь будет очень оценена.
Вы должны подумать о том, чтобы задать другой вопрос вместо того, чтобы его редактировать, изменяя весь вопрос. – sergioadh