Question

I am creating a light box. When you hover over an image, the accompanying text and relative images should also light up. However, the accompanying text is not.

They are all within the same class, but the text is a within a p tag further down the page.

Here is the website: http://www.rosiehardwick.co.uk

.nationaltrust {
background-color:red;
-webkit-transition: opacity 0.5s linear; 
opacity: 0.05;
}


.nationaltrust:hover {
-webkit-transition: opacity 0.5s linear; 
opacity: 1;
}

And html:

 </div>
<div id="image-wrap">
<div class="nationaltrust">
<img src="/images/ss.gif"/>
<img src="/images/aw.gif"/>
</div>

</div>

<div id="para-wrap">
<div class="nationaltrust"><p>
blahblah</p></div></div>

Thanks for any help, I’m quite new to this,

Tom

Answer 1

I think you might misunderstand how the class/hover thing is supposed to work. When you write:

.someClass:hover {color: red}

You’re telling the browser “when any element with the class ‘someClass’ is hovered, make its color red”. It doesn’t mean “Make every element with the class ‘someClass’ red“.

If I understand you correctly, you want hovering one element to change the style of a separate element. There are two ways of doing this – 1) put both the image and text inside a single containing element, then apply the :hover styles to them, or 2) use some javascript to make the connection between the two and adjust styles as needed.

For #1:

HTML:

<div class="nationalTrust">
    <img src="/images/ss.gif"/>
    <p class="caption">Blah blah</p>
</div>

CSS:

.nationalTrust:hover img {
    opacity: 1;
    background-color: red;
}

/* Just to show that you can have different styles for the text and image*/
.nationalTrust:hover .caption {
    opacity: 0.85; 
}

That might not work, for what you want to do: It may be too restrictive to contain both the image and text inside one element. In that case, some javascript is the way to go. This example uses jQuery to simplify things:

HTML:

<img class="nationaltrust" src="/images/ss.gif"/>

<p class="nationaltrust-caption">Blah-blah</p>

Javascript:

$(function(){
    $('img.nationaltrust').hover(
        function(){
            $('p.nationaltrust-caption').addClass('active'); //When the image is hovered, add the 'active' class to the caption
        },
        function(){
            $('p.nationaltrust-caption').removeClass('active'); //Remove the class when un-hovered.
        }
    )
});

Now, that javascript is very quick and dirty, but it should do what you want. The problem is that you’re going to need to write separate code for each image/caption you have on the page (presuming they all have different classes). It’s easy enough to write the HTML and JS so that they’ll work with any number of different images – let us know if you’d like to see that example, too.