I'm developing a website where we would like to use this part. On hovering the div it has to pup over the background image and show additional text. Also in addition the background image changes.
At the moment the DIV seems to only want to expand downward but I really would like it to expend upward. But here is the kicker, I can not use the fixed position because the element needs to scroll with the page and not stick to the bottom.
So most of the functionality i get working in the fiddle below but not the popping upward. I hope you can help me :)
Here is what I have so far:
$('#hover-01').on('mouseenter', function() {
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function() {
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
$('#hover-02').on('mouseenter', function() {
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-02').on('mouseleave', function() {
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
$('#hover-03').on('mouseenter', function() {
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-03').on('mouseleave', function() {
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});.wrapper {
position: relative;
}
#hover-change {
width: 100%;
height: 300px;
background-image: url("http://www.w3schools.com/css/trolltunga.jpg");
background-repeat: no-repeat;
}
@import url(https://fonts.googleapis.com/css?family=Merriweather);
* {
box-sizing: border-box;
}
body {
font-family: 'Merriweather', serif;
padding: 20px;
}
a {
color: #f06d06;
text-decoration: none;
}
.box {
padding: 2em;
border: 1px solid #ccc;
display: block;
width: 33%;
height: 150px;
float: left;
margin: -1px 0 0 -1px;
color: black;
background: linear-gradient(white, white 50%, #333 50%, #333);
background-size: 100% 202%;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
position: absolute;
margin-top: -150px;
overflow: hidden;
}
.box h2 {
font-weight: 400;
letter-spacing: -1.5px;
line-height: 1.2;
}
.box h3 {
font: 0.8em "Lucida Grande", serif;
}
.box:hover {
background-position: 100% 100%;
animation: up-bump 0.4s ease;
height: 400px;
}
.box:hover h2 {
color: #48ad26;
}
.box:hover h2 span {
color: white;
}
.box:hover h3 {
color: #999;
}
.box2 {
padding: 2em;
border: 1px solid #ccc;
display: block;
width: 33%;
height: 150px;
float: right;
margin: -1px 0 0 -1px;
color: black;
background: linear-gradient(white, white 50%, #333 50%, #333);
background-size: 100% 202%;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
position: absolute;
margin-top: -150px;
margin-left: 33%;
overflow: hidden;
}
.box2 h2 {
font-weight: 400;
letter-spacing: -1.5px;
line-height: 1.2;
}
.box2 h3 {
font: 0.8em "Lucida Grande", serif;
}
.box2:hover {
background-position: 100% 100%;
animation: up-bump 0.4s ease;
height: 400px;
}
.box2:hover h2 {
color: #48ad26;
}
.box2:hover h2 span {
color: white;
}
.box2:hover h3 {
color: #999;
}
.box3 {
padding: 2em;
border: 1px solid #ccc;
display: block;
width: 33%;
height: 150px;
float: right;
margin: -1px 0 0 -1px;
color: black;
background: linear-gradient(white, white 50%, #333 50%, #333);
background-size: 100% 202%;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
position: absolute;
margin-top: -150px;
margin-left: 66%;
overflow: hidden;
}
.box3 h2 {
font-weight: 400;
letter-spacing: -1.5px;
line-height: 1.2;
}
.box3 h3 {
font: 0.8em "Lucida Grande", serif;
}
.box3:hover {
background-position: 100% 100%;
animation: up-bump 0.4s ease;
height: 400px;
}
.box3:hover h2 {
color: #48ad26;
}
.box3:hover h2 span {
color: white;
}
.box3:hover h3 {
color: #999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper"></div><div class="responsive-section-image" id="hover-change"><div class="overlay"></div></div><div class="box"><a id="hover-01" class="open-project" href="#"><h2><span>Lunch -</span> is delicious anytime</h2><h3>Even after dinner</h3><p>
test content test content
test content test content
test content test content
test content test content</p></a></div><div class="box2"><a id="hover-02" class="open-project" href="#"><h2><span>Lunch -</span> is delicious anytime</h2><h3>Even after dinner</h3><p>
test content test content
test content test content
test content test content
test content test content</p></a></div><div class="box3"><a id="hover-03" class="open-project" href="#"><h2><span>Lunch -</span> is delicious anytime</h2><h3>Even after dinner</h3><p>
test content test content
test content test content
test content test content
test content test content</p></a></div></div>