Change image when hovering over a list of text

Question

Need help on making images change when hovering over a list of text. I've been looking through several examples in here but still can't make it work. Can someone look at my code and figure out what am I doing wrong?

https://jsfiddle.net/8gnkjeze/1/

 <section id="about-us" class="page-section light-bg no-pad">
        <div class="container-fluid who-we-are">
            <div class="row">

                                    <div class="col-md-6 no-pad text-center">
                    <!-- Image -->

                 <div id="pic" class="pic"></div>                       
                </div>
                <div class="col-md-6 pad-60">                       
                    <div class="section-title text-left">
                        <!-- Title -->
                        <h2 class="title">Industries</h2>
                    </div>

                    <p>We have established a methodical structured approach for the design of service offerings that include maintenance, repair, and on a case-by-case basis overhaul service solutions.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="arrow-style">

                                <li><div id="word" class="red"><a href="industries.html">Marine Construction</a></div></li>
                                <li><div class="red"><a href="industries.html#offshore-construction">Offshore Construction</a></div></li>
                                <li><div class="red"><a href="industries.html#industrial-construction">Industrial Construction</a></div></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="arrow-style">
                                <li><div class="red"><a href="industries.html#pipe-fabrication">Pipe Fabrication</a></div></li>
                                <li><div class="red"><a href="industries.html#onshore-construction">Onshore Construction</a></div></li>


                            </ul>
                        </div>
                    </div>

                </div>

           </div>
        </div>
    </section>

Answer 1

Because you cannot traverse up through ancestry with CSS, and your pic holder is that way, you'll need to use a little javascript to handle this. Here's a simplified example based on the code you provided. This uses jQuery (cause I'm lazy), but can also be accomplished without it using plain ole javascript.

 $("ul a").hover(function() { $("#pic").removeClass().addClass($(this).attr('rel')); }); 

 #pic{ width: 120px; height: 120px; border: 1px solid black; margin-right: 20px; float:left; } #pic.p1 { background-image: url("http://fillmurray.com/200/300"); } #pic.p2 { background-image: url("http://fillmurray.com/200/200"); } #pic.p3 { background-image: url("http://fillmurray.com/300/300"); } #pic.p4 { background-image: url("http://fillmurray.com/120/120"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pic"></div> <ul> <li><a href="#" rel="p1">Marine Construction</a></li> <li><a href="#" rel="p2">Offshore Construction</a></li> <li><a href="#" rel="p3">Pipe Fabrication</a></li> <li><a href="#" rel="p4">Onshore Construction</a></li> </ul>