css target text over image - html

Question

I am soooo close and yet 3 different methods I've tried to get text over an image on a hover is defying me.
What I am trying to do is to have a list on the left, hover over any one of the 6 elements on the left and have the image on the right change with text on it. The first image should be the default shown image.
You will see that I've tried 3 different ways to get text to show up on the first 3 elements. No matter how I do it, the text always shows up on all 3 elements as opposed to JUST the hovered element.
Here is the live test site: http://oppcess.test-lca-website.com/
This is a WordPress site using Headway Themese(GUI theme creator).
Here is the jsfiddle of the section where the issue is: http://jsfiddle.net/DragonDon/6aw6jc99/ (It's going to looked messed as it's not the full site but more just a custom code in a container.
<div class="switch prehover texthover">
<ul>
<li>
One Stop
<img src="" alt="" />
<h2><span>All required services in one location</span></h2>
</li>
<li>
Private
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/private.png" style="width:67%;" alt=""/>
<h2><span>Personal information and requirements are kept completely confidential.</span></h2>
</li>
<li>
Personal
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Personal.png" style="width:67%;" alt=""><p class="personal"></p></img>
</li>
<li>
Cross border
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Crossborder.png" style="width:67%;" alt=""/>
</li>
<li>
Execution
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/execution.png" style="width:67%;" alt=""/>
</li>
<li>
Services
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Service.png" style="width:67%;" alt=""/>
</li>
</ul>
.switch ul {
display: inline-block;
height: 100%;
position: relative;
list-style-type: none;
width: 100%;
padding: 0;
}
.switch li {
font: bold 16px/100px sans-serif;
list-style-type: none;
height: 100%;
}
.switch a {
border-right: 1px solid #444;
border-top: 1px solid #444;
color: red;
display: block;
text-align: center;
text-decoration: none;
width: 33%;
}
.switch li:first-child a {
border-top: none;
background: #1f3552;
color: white;
}
.switch li:nth-child(2) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(3) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(4) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(5) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(6) a {
color: white;
background: #1f3552;
}
.switch a: {
color: #fff;
}
.switch li:nth-child(2) a:hover {
color: #fff;
}
.switch li:nth-child(3) a:hover {
color: #fff;
}
.switch li:nth-child(4) a:hover {
color: #fff;
}
.switch li:nth-child(5) a:hover {
color: #fff;
}
.switch li:nth-child(6) a:hover {
color: #fff;
}
.switch img {
background: red;
display: none;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.switch li:nth-child(2) img {
background: blue;
}
.switch li:nth-child(3) img {
background: green;
}
.switch li:nth-child(4) img {
background: yellow;
}
.switch li:nth-child(5) img {
background: gray;
}
.switch li:nth-child(6) img {
background: black;
}
.switch a:hover + img,
.switch img:hover {
display: block;
}
.prehover {
background-image: url("http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/onestop.png");
background-repeat: no-repeat;
background-position:right top;
background-size: 67% ;
}
.li-hover img {
height: 100%;
width: 100%
}
.texthover h2 span {
color: white;
font: bold 55px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
right: 5%;
bottom: 10%;
}
.personal:before {
content: "Providing one on one, bespoke consultation by taking all client needs into consideration.";
color: red;
font: bold 55px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
right: 5%;
bottom: 10%;
}

Answer 1

You are doing the toggle(show/hide) only for image sibling and not the text.
.switch a:hover + img, .switch img:hover {
display: block;
}
You can wrap all text in a container with say class .details and use the general sibling combinator ~ for selecting the elements after the anchor in this case. Keep the .details hidden at first and toggle on hover
.details {
display: none;
}
.switch a:hover ~ div.details {
display: block;
}
Demo fiddle

Answer 2

Add z-index: 1; on below codes to show the image at the top
.switch a:hover + img, .switch img:hover {
display: block;
z-index: 1;
}