I posted a question earlier, but I forgot to include the second part of it.
The initial question was about creating a hover animation (which is working perfectly). However, I am facing an issue where one div disappears and another one needs to appear in its place.
Below is the code snippet:
HTML:
<div class="col-xs-12 col-md-4">
<div id="beach2"></div>
<div class="layer3"></div>
<div class="wrapper">
<div class="layer4">
<div class="magnifyingGlass"></div>
<a href="#"><img src="images/magnify.png" class="img-responsive" id="magnify" alt="Magnifying Glass" /></a>
</div>
<div class="layer5">
<div class="label">
<p class="title">Lorem ipsum dolor sit</p>
<p class="title2">amet consetetur sadipscing eltir</p>
</div>
</div>
</div>
I want '.layer3' to disappear while '.layer4' and '.layer5' appear on hover.
CSS:
.layer3{
width: 100%;
height: 300px;
margin-top: -340px;
background-color: rgba(226, 151, 145, 0.5);
}
.wrapper{
display: none;
}
#magnify{
margin-top: -35px;
padding: 10px 10px;
z-index: 9999;
}
.magnifyingGlass{
height: 34px;
width: 34px;
background-color: #1abc9c;
z-index: 999;
}
.layer4{
height: 44px;
width: 44px;
background-color: rgba(26, 188, 156, .5);
margin: -210px 20px 0 0;
float: right;
padding: 5px 5px;
position: relative;
margin-top: -205px;
}
.label{
height: 65px;
width: 99%;
background-color: #1abc9c;
display: block;
position: relative;
z-index: 999;
}
.layer5{
height: 75px;
background-color: rgba(26, 188, 156, .5);
margin-top: -75px;
padding: 5px 0 0 5px;
position: relative;
}
.title{
font-size: 18px;
color: #fff;
text-align: left;
display: block;
position: relative;
padding: 10px 5px;
}
#title2{
color: #087253;
font-size: 12px;
text-align: left;
padding: 0 5px;
display: block;
position: relative;
}
jQuery:
$(document).ready(function(){
$('.layer3').hover(
function(){
$(this).animate({opacity:'0'});
},
function(){
$(this).animate({opacity:'1'});
}
);
$('.wrapper').mouseover(
function(){
$(this).show();
},
function(){
$(this).hide();
}
);
});
Can anyone provide suggestions on how to solve this problem?