Ok, I've been banging my head for hours on this and I can't seem to figure it out. I want to have content in another division to react to a hover on an element in a different division. I can hand code a solution like this:

.bottle{opacity:0;}
.item1:hover .bottle {opacity:1;}

<div class="responsive-picture item1">
<img src="./images/glass.png">
<div class="bottle"><img src="images/bottle.png"></div>
</div>

So if I hover on the image of glass.png, bottle.png gets opacity and appears. But I can't get this structure in SD when adding pictures. The best I can do is get the pictures side by side in a division, but then the hover doesn't trigger the effect on the other element. I tried to find a solution with foundation, but I'm not smart enough for that.

Maybe someone has a solution? Many thanks.

You need put the two images in the same container then set the one you want showing to position relative and the other to position absolute so that they are on top of each other. Then set the one position absolute to regular =opacity 0 hover =opacity 1 then the other one is the opposite settings.

I believe that Inger has a component that does that and if you look in your components library there is so etching in the blockquotes section that uses the same principle not images but same principle.

The way I understand this, it is not the same as any of my components. I believe the two images, glass and bottle, are to be at two different locations.

Also, I seem to remember from the time when Macromedia was the owner of Dreamweaver and all tose tools that Adobe took over, that there was an app with which one could easily achieve that effect...

Js depending on structure. What structure is actually needed? I read the post as the structure is what was used to get it working but it might need to be outside the parent.

I'm also thinking there ought to be some js here, or some attributes at least. But I don't know what.

Also, I set it up manually in the Editor, and it is working fine to some extent. Since the div class item1 is the parent here, you get the bottle showing, regardless where you hover inside that parent, and I wonder is that is wanted or not.

Thanks for all the input. After more experimenting, I think the problem I have is not so much syntax but that the image I wanted to show was somehow shielding the triggering image and not allowing the hover to trigger. The shielding extends further from the image than the image itself. It's probably due to how I am positioning the images within a gridded container.

This is as far as I get. I have popped the css into the page manager. It doesn't seem to be possible to let go of the .item1 after setting it to hover, in order to make the .bottle invisible. Once you leave one element to do something with the other, it pops back to regular.

Thanks Inger. I think I have things sorted out now. But I have another issue I will post in a new thread.

Hi people just checked again before going home all night again in the internet cafe.

I didn't realize the images were needed side by side not ontop of each other.
This is still possible in SD without any outside CSS or js.
Although it looks like it's too late to help Marty next time I'm at internet cafe (3 days) to authorize that I am allowed to use site designer again I might will pop something up just incase someone else may want to learn how to do it within sd4