I'm struggling with javascript and zoom

Question

The thing I want to do is have a row of pictures inline and zoom the .prev and .next with JavaScript. The zoom itself works fine, but I can't get the neighbours to play ball.

The code is as follows:

$(document).ready(function() {
    $('.img-zoom').hover(function() {
        $(this).addClass("transition").parent().prev().addClass("side");
        $(this).addClass("transition").parent().next().addClass("side");
    },
    function () {
        $(this).removeClass("transition").parent().prev().removeClass("side");
        $(this).removeClass("transition").parent().next().removeClass("side");
    });
});

It works when I strip the CSS down, it must be something really simple. Here is the CSS:

@charset "UTF-8";
/* CSS Document */

* {
    padding: 0;
    margin: 0;
}
body {
    text-align: center;
}
li {
    display: inline;
    list-style-type: none;
}
ul {
    text-align: center;
    white-space: nowrap;
}
.main_wrapper {
    width: 98%;
}

/* Dock */
.dock {
    margin: auto;
    list-style-type: none;
    bottom: 0;
    position: fixed;
    left: 20%;
    right: 20%;
    width: 60%;
    border-radius: 5px 5px 0 0;
    padding-top: 0.5%;
    padding-bottom: 1.0%;
    background-color: rgba(171,171,171,0.2);
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: rgba(213,213,213,1);
    border-right-color: rgba(213,213,213,1);
    border-bottom-color: rgba(213,213,213,1);
    border-left-color: rgba(213,213,213,1);
}
.dock li img {
    margin-left: 0.4%;
    margin-right: 0.4%;
    box-sizing: border-box;
    cursor: pointer;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 8%;
    -webkit-box-reflect: below 1%
            -webkit-gradient(linear,
                    left top,
                    left bottom,
                    from(transparent),
                    color-stop(0.7, transparent),
                    to(rgba(255,255,255,.5)));
    -webkit-transition: all 0.5s;
    -webkit-transform-origin: 50% 100%;
}

/* Java Stuff */
.img-zoom {
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
}
.transition {
    -webkit-transform: scale(1.8);
       -moz-transform: scale(1.8);
         -o-transform: scale(1.8);
            transform: scale(1.8);
}
.side {
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
}
.dock li:hover img {
    margin-right: 1%;
    margin-left: 2%;
}
.dock  li:hover + li img,
.dock  li.next img {
    margin-right: 1%;
    margin-left: 2%;
}

Answer 1

I'm not sure I can guess your html but this pen works with the code you have. You might be going to the parent when you don't really have to?

EDIT 2: Again you need to give me the html for me to give you the exact solution. I'm basically guessing your html layout.

EDIT 3: Holy crap this a neat design. I actually learned from this.

EDIT 4: This is the most I can provide with my novice skills lol

 $(document).ready(function(){ $('.img-zoom').hover(function() { $(this).addClass("transition").parent().parent().prev().addClass("side"); $(this).addClass("transition").parent().parent().next().addClass("side"); }, function () { $(this).removeClass("transition").parent().parent().prev().removeClass("side"); $(this).removeClass("transition").parent().parent().next().removeClass("side"); } ); }); 

 @charset "UTF-8"; /* CSS Document */ * { padding: 0; margin: 0; } body { text-align: center; } li { display: inline; list-style-type: none; } ul { text-align:center; white-space:nowrap; } .main_wrapper { width: 98%; } /* Dock */ .dock { margin: auto; list-style-type: none; bottom: 0; position: fixed; left: 20%; right: 20%; width: 60%; border-radius: 5px 5px 0 0; padding-top: 0.5%; padding-bottom: 1.0%; background-color: rgba(171,171,171,0.2); border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: rgba(213,213,213,1); border-right-color: rgba(213,213,213,1); border-bottom-color: rgba(213,213,213,1); border-left-color: rgba(213,213,213,1); } .dock li img { margin-left: 0.4%; margin-right: 0.4%; box-sizing: border-box; cursor: pointer; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; width: 8%; -webkit-box-reflect: below 1% -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5))); -webkit-transition: all 0.5s; -webkit-transform-origin: 50% 100%; } .img-zoom { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; } .img-zoom:hover { z-index: 100; } .transition { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); } .side a img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .dock li:hover img { margin-right: 1%; margin-left: 2%; } .dock li:hover + li img, .dock li.next img { margin-right: 1%; margin-left: 2%; } .fake-img { height: 60px; width: 60px; background-color: black; } .fake-img-alt { height: 60px; width: 60px; background-color: tomato; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dock"> <ul> <li> <a href=""><img class="img-zoom fake-img" /></a> </li> <li> <a href=""><img class="img-zoom fake-img-alt" /></a> </li> <li> <a href=""><img class="img-zoom fake-img" /></a> </li> <li> <a href=""><img class="img-zoom fake-img-alt" /></a> </li> <li> <a href=""><img class="img-zoom fake-img" /></a> </li> <li> <a href=""><img class="img-zoom fake-img-alt" /></a> </li> <li> <a href=""><img class="img-zoom fake-img" /></a> </li> <li> <a href=""><img class="img-zoom fake-img-alt" /></a> </li> </ul> </div>