Enlarged Image

You don’t have to understand it to be able to use it. That example has something you can neatly copy and paste and make use of - http://cssdemos.tupence.co.uk/image-popup.htm#fullcode

In the first link he left out a lot of code…

In the full code area it is making a little more sense.

And, no, Ryan, I don’t copy and paste. I am here to learn and understand!

That seems viable. Though I would add the large image dynamically with CSS to avoid loading the full size one as part of the origin request.

I am having a difficult time sifting through this guys code…

This is what I have so far…

<div class='enlarge'>
    <img src="/images/shop_200x200.png" width="200" alt="" title="" />
        <img src="/images/shop_600x600.png" width="600" alt="" title="" />

    position: relative;
    z-index: 0;

.enlarge span{
    position: absolute;
    left: -9999px;

.enlarge img:hover span{
    top: -300px;
    left: -20px;

Before adding the styles, I had a regular image in my right column and then another one below it where you could only see part of it - it was like looking through a keyhole!

Then I added the styles above and the larger image disappeared which is good.

But when I hover over the smaller image I don’t see the larger image appear.

Could use some help to modify the example to make things work on my client’s Home Page.


P.S. I think one issue with things not working is that I am not using an unordered list…

Look at this selector. Now look at how your HTML is structured. I want you to tell me, why does this selector not work? Why would it not work, given you HTML?

I’d ask that noone please give away the answer. School is in session :school:


Not an issue. The demo uses a UL/LI but you’ve removed the references to the UL/LI in your code. HTML is about semantics. You can write CSS to be HTML tag-agnostic (e.g. it doesn’t matter what tags you use).

What I’m saying is, that CSS you have is written to not care all that much abut the HTML structure / what elements need to be used (sort of.)

Well, Professor, it appears that I have my tags in the wrong order.

But the bigger issue that I am not getting is this…

How do I have a style where I hover over object-1 and it affects object-2?? :confused:

(I think this is some advanced CSS topic of which I know not!)

Your tag order is just fine. We can make it work with what you have.

By fixing that selector.

So please answer the question. Ignore the demo code. I want you to tell me what was wrong with that selector, when combined with your HTML.

Nope :slight_smile: . This is going over the basics of CSS selectors.

What does this select?

div span{}

So why does this selector look wrong when compared to your HTML?

img span{}

Looking at my HTML…

I want it so when the user hovers over…

<div class='enlarge'>
    <img src="/images/shop_200x200.png" width="200" alt="" title="" />

…that my larger image here…

<div class='enlarge'>
        <img src="/images/shop_600x600.png" width="600" alt="" title="" />

…will appear on the screen on top of the Home Page and at a position I have yet to decide upon.

Yes, and I’m trying to help you with that. I am not going to spoon feed you the answer, because I think this is something you need to learn. You are here to learn, after all, right? Isn’t that what you said?

Please go back over my exercises over the last few posts, and answer my questions.

I am here to learn, sir!


I’m not sure anything.

That should style the larger image, although I’m not sure if hiding it impacts that?!

It obviously - now - matches nothing.

I’m not referencing any of the HTML you have posted.

Please pretend we just have this simple line of CSS. Pretend that you don’t know the HTML. You tell me; what do you THINK those selectors select? Ignore the gallery code.

div span{}

What does this select? Again; in this ficticious example, you do not know the HTML.

It applies a style to a span that is nested inside a generic div…

Good job. The keyword there is nested. Aka a child.

Now what does this select? Is this possible? Why or why not?

img:hover span{}

Note, that this is what your code had.

This is the HTML you basically had:


Overly simplified, of course.


It applies a style to a span nested an img when the img is hovered over. (Which would be impossible.)


Very very good. That is impossible because the img cannot have nested children.

Now, is there any way to select an adjacent sibling using a CSS combinator?


Please carefully go through this selector list. What selector do you see that could be applied to your situation? How could we get the img:hover span{} code you have, to properly work? What selector example from this page, translates to your situation?

The answer is there. Please let me know your thoughts.

Check out their demos for each example. Look at the HTML and see if anything there translates to your code.

Well, this is where I have a lack of knowledge…

I need to style…

<div class='enlarge'>
        <img src="/images/shop_600x600.png" width="600" alt="" title="" />

…when the action img:hover happens here…

<div class='enlarge'>
    <img src="/images/shop_200x200.png" width="200" alt="" title="" />

I will re-read the link you provided, but I am stumped…

The only thing I can see is that each img share the same parent.

But I don’t know if you can hover over div.enlarge


That is all the spoon feeding I will provide. This was on that w3schools link; I was hoping you’d pick this one, but alas…

Please review that example and see how you can incorporate it into your img:hover span{} code.

Spoon feeding is a bit harsh…

I read the link, but what is obviously to you is not to me.

I can’t apply a hover style to the larger image because it is hidden.

And if I style the smaller image, then just that happens (i.e. styling the smaller image doesn’t style the larger image).


I’m reviewing things but not getting it so far…