css target text over image

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>
        <a href="#" class="hvr-bubble-right">One Stop</a>
        <img src="" alt="" />
        <h2><span>All required services in one location</span></h2>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Private</a>
        <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>
        <a href="#" class="hvr-bubble-right">Personal</a>
        <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>
        <a href="#" class="hvr-bubble-right">Cross border</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Crossborder.png" style="width:67%;" alt=""/>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Execution</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/execution.png" style="width:67%;" alt=""/>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Services</a>
        <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%;
}

Updated Fiddle: jsfiddle.net/DragonDon/6aw6jc99/3

DragonDon
– DragonDon

2015-02-03 07:02:33 +00:00
Commented Feb 3, 2015 at 7:02 — DragonDon
– DragonDon, Commented Feb 3, 2015 at 7:02

anpsmn · Accepted Answer · 2015-02-03 05:39:45Z

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

answered Feb 3, 2015 at 5:39

anpsmn

7,2572 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

DragonDon Over a year ago

Excellent catch! I knew it was something I hadn't learned before! Thanks! Any suggestions on how to make the text position relative to the image and not the link on the left?

anpsmn Over a year ago

Either you can position the text container as you have done to the image (positioned absolute with right:0) or you can wrap image and text with a container and position the container so that the need for positioning the content individually is not needed.

DragonDon Over a year ago

So, put a DIV tag after the LI tag? Or before?

anpsmn Over a year ago

Something like this. I have wrapped img and text with a div with class contentWrap and positioned it.

DragonDon Over a year ago

Strange, when I tried, that code just broke everything. I get no text on the first and the rest of the images are not in their proper place. :/ I've updated teh Fiddle with my latest modifications: jsfiddle.net/DragonDon/6aw6jc99/5 (even stranger, fiddle doesn't show hover text on first option, but does on the live site...go figure...)

|

Anthony Carbon · Accepted Answer · 2015-02-03 04:55:13Z

0

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;
}

answered Feb 3, 2015 at 4:55

Anthony Carbon

6181 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

css target text over image

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related