JQuery effect on image and label on hover

Question

I have a page and I want when I'm hovering above a certain label to make an effect of zoom in in certain image and change the color of that label too, I'm doing that effect of zoom in already when hovering over the image, but I would like now to do that effect over the image and change the color of the label too when I'm hovering above the label or the image. I'm not sure of how to select the image because the image is not parent or even sibling of the corresponding label...

I'm showing a picture to be more descriptive: When I hovering above the Sky label or the plane image , I want that label to change of color and I want to make the zoom in effect on the plane img . And like that with the other elements: Planet with the Earth planet image , etc...

This is my code:

<div style="height:400px; width:600px" class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/aviation.png" width="80" height="80" class="jumper" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/international.png" width="80" height="80" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Sky</label>

            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label>
        </div>

        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/longshore3.gif" width="80" height="80" class="jumper" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/marine.png" width="80" height="80" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Warehouse</label>

            <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Ocean</label>
        </div>
    </div>
</div>

I know that using ids I can do that but I would have many pages should be possible to do that without ids?

Answer 1

It's kind of clunky, but you could do it by assigning corresponding ID's to the img and label elements.

For example, call the images img1 , img2 , etc. and the labels l1 or label1 , etc. Then when the image is hovered over, call a function that grabs the corresponding label and changes its color. You could use .slice() to get appropriate ID, like this:

labelID = "label" + imgID.slice(3);

That will grab the number from the image ID and come up with the correct label ID. Then, just change the color for that label ID.

Answer 2

This is the best you can do with CSS, but it includes reformatting of your initial HTML code. Here is the start:

HTML:

<div style="height:400px; width:600px" class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2">Sky</label>   
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/aviation.png" width="80" height="80" class="jumper" />
            </div>
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label>
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/international.png" width="80" height="80" class="jumper" />
            </div>
      <div>
</div>

CSS:

.container > div > div:first-child:hover + div {
    transform: scale(1.5);
}
.container > div > div:nth-child(3):hover + div {
    transform: scale(1.5);
}

From there you can start with your CSS and Bootstrap classes. Now, I do know this is a bad solution and it is targeting divs only, but that is the most you can do with adjacent selectors. I can also post the simple JavaScript and/or jQuery solution...

Now, you could get the elements by the alt and src and alt should be unique. src already is:

img[src=""] 
img[alt=""]