How to use jQuery for hover effects

Question

I am trying to have a hover effect over several pictures when moused over, thus I am having two problems:

1) My alignment is off, when having divs appear over the existing one.

2) I cannot make a smooth effect one after the other (there are four pictures).

Below is my HTML, CSS, and jQuery for 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();
    });
});

Does anyone have any ideas as to how to help?

Answer 1

There are a few things wrong here.

1: Display: hide is invaild

You mean to have display: none

2: Positioning.

In order for elements to overlap each other, they need to be out of the flow. Use positioning to do this. I would recommend a relative container with absolute inner elements.

3: Fading

Your jQuery is simply hiding and showing the elements, which has no transition to it. If you want them to fade in and out, you can use the jQuery functions .fadeOut() and .fadeIn() or create custom animations with .animate():

$(function(){
    $(".layer3").hover(function(){
        $(this).fadeOut(500);
        $(".layer4, .layer5").fadeIn(500);
    });
});

---

Here's a very crude example.