Hey there,
I've got some jquery running fairly well, howeever when I hover over the
element in question, the bottom expands downward which is not unexpected but is not the desired effect. I'd like the bottom of the
element to remain stationary with the top of the
element expanding upwards.
If you'd like to see what I currently have, you may navigate to http://demo.ivannovak.com/mobia/
Any help would be greatly appreciated.
Here is my code:
HTML
<div class="button">
<h3>Product Quality</h3>
<div>Duis tristique ultricies velit sit amet adipiscing.</div>
<img src="<?php bloginfo('template_url'); ?>/assets/img/INgravatar_subernova.png" alt="placeholderImage" height="70" />
<p><a href="#">Learn More ></a></p>
<div class="bottom"></div>
</div>
CSS
div#buttons {}
div#buttons .button {
background: url(assets/img/bg_blue_top.jpg) #206094 no-repeat top left;
padding: 5px 10px 0;
width: 209px;
float: left;
margin-right: 5px;
position: relative;
height: 50px;
}
div#buttons .button h3 {
font-weight: normal;
color: #fff;
text-transform: uppercase;
}
div#buttons .button:hover div,
div#buttons .button:hover img {
/* display: block; */
}
div#buttons .button div {
width: 120px;
padding-right: 20px;
float: left;
color: #bbb;
display: none;
}
div#buttons .button img {
float: right;
display: none;
}
div#buttons .button p {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 9;
font-weight: bold;
text-transform: uppercase;
}
div#buttons .button p a {
color: #7bc143;
text-decoration: none;
}
div#buttons .button p a:hover {
text-decoration: underline;
}
div#buttons .button .bottom {
background: url(assets/img/bg_blue_bottom.jpg) no-repeat bottom left;
height:26px;
position: absolute;
display: block;
width: 229px;
right: 0px;
padding:0;
bottom: 0;
}
jQuery
$(document).ready(function() {
$('.button').mouseenter(function() {
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
});
$('.button').mouseleave(function() {
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
});
});
