Seeking assistance in creating a hover effect over several images when moused over has led to two challenges:
1) The alignment is becoming skewed when new divs appear over the existing one.
2) Difficulty achieving a smooth transition for each image, as there are four pictures in total.
Presented below is the code snippets for HTML, CSS, and jQuery related to one of the four pictures.
HTML:
<div class="col-xs-12 col-md-4 col-md-offset-2">
<div id="beach1"></div>
<div class="layer3"></div>
<div class="layer4">
<div class="magnifyingGlass"></div>
<img src="images/magnify.png" class="img-responsive" id="magnify" alt="Magnifying Glass" />
</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>
CSS:
#beach1{
height: 300px;
background-image: url(../images/beach.jpg);
background-repeat: no-repeat;
margin-bottom: 40px;
}
#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;
display: hide;
}
.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: -115px;
padding: 5px 0 0 5px;
display: hide;
}
.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').mouseover(function(){
$(this).hide();
$('.layer4').show();
$('.layer5').show();
});
});
If anyone has suggestions or solutions on how to address these issues, I would greatly appreciate it!