Can't get div to appear when hovering over another div

Question

I apologize for posting a question that should be answered by the other threads, but after the last hour of trying solutions already provided with no success I have to assume my coding in another location is incorrect. If you would like skip to looking at the project , I need the #info_area to appear when mousing over the other divs, such as #final_sale. link to project

the css looks like this

#final_sale {
   width: 474px;
   position: absolute;
   top: 691px;
   left: 5px;
   transition: width 1s, height 1s;
   -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
#final_sale:hover {
   width: 575px;
   position:absolute;
   top:691px;
   left:5px;    
}

The code for all the hover divs looks like this they just have other names than "final_sale". All of these divs also have a class of "show_info" (.show_info), which you can see in the html below.

Now going off of other posts answered I have the info area like this:

#info_area {
   background-color: #666;
   display: block;
   opacity:0;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
   transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
}
.show_info:hover #info_area {
   background-color: #666;
   display: block;
   opacity:0.5;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
}

I have also tried ".show_info:hover + #info_area"

Here is the HTML, my best guess now is maybe because "info_area" is not nested within one of the other divs, but I have tried that as well and also tried including the main containing div in the CSS.

html

<div id="funnel_container">
    <!---description blocks---->
        <div id="info_area">
           info here
        </div>
    <!---description block end--->

    <!-----main mouse over blocks---->
    <div id="leads" class="show_info">
         <img src="Leads to be qualified(yellow).jpg" alt="leads to be qualified" class="title_block" />
    </div>
    <div id="scoring" class="show_info">
        <img src="scoring and cultivation(blue).jpg" alt="scoring and cultivation" class="title_block" />
    </div>
    <div id="sales" class="show_info">
        <img src="qualified sales lead(red).jpg" alt="qualified sales leads" class="title_block" />
    </div>
    <div id="final_sale" class="show_info">
        <img src="final sale(orange).jpg" alt="Final Sale" class="title_block" />
    </div>
<!---end of main blocks---->
</div>

I uploaded the project HERE, might take a second to load since I have not completely made it web ready due to it not being finished or placed where it will eventually go.

Thank you in advance to anyone who can help, its been driving me crazy all evening and im hoping its something simple I have missed.

Answer 1

If you can make #info_area the last sibling, then you could achieve this with the general sibling combinator:

.show_info:hover ~ #info_area{
  ...
}