I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black):
My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same effect for the red section as well:
How can I achieve this functionality?
var redSection = $('#red');
var blackSection = $('#black');
redSection.on('mouseover', function() {
// Add code here to overlay the other section
});
The HTML code for the sections is as follows:
<section id="hero">
<figure id="urbandesign">
<a href=“#" target="_blank">
<img src="images/urbandesign.jpg" alt="Urban Design">
</a>
</figure><!-- End figure -->
<figure id="photography">
<a href=“#" target="_blank">
<img src="images/photography.jpg" alt="Photography">
</a>
</figure><!-- End figure -->
&...And here is the CSS styles used:
#hero {
height: 480px; /* Default 500px */
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
background: url(../images/hero.jpg) no-repeat center; /* remove */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#hero figure {
position: absolute;
top: 0;
background: #FFF;
}
#hero img {
width: 100%;
max-width: none;
position: relative;
opacity: 0.4;
}
I aim to replace the red and black sections with images in the final design. Thank you for your assistance!