Transition effects using MouseOver layer?

[Rocketman]

Hi,

I want to use a transition effect whereby when the cursor is moved over an icon, an overlay fades in over the top of the icon.

Basically, this is for a photography website and I have a series of about a dozen images as thumbnails (roughly 200x200 pixels) and when you move the mouse over each one the title of the photograph appears over the thumbnail.

I can achieve this effect using individually created pop-up layers, so that each of the dozen or so photograph thumbs (on the MouseOff layer) has a corresponding pop-up layer with the title of the photograph overlayed onto the image. I specify in the 'web properties' box which pop-up layer to use for each thumbnail (in the Mouse-Over tab) and there is an option here to change the 'effect'. I set the effect to fade.

So this does what I want but the problem is that it creates lots of layers on each page, which is getting un-manageable.

Is there any way to use the MouseOver layer to get the same effect, therefore only requiring the one MouseOver layer instead of numerous seperate pop-up layers?

I am able to use the MouseOver layer to place the thumbnail overlays so that they appear when the cursor is moved over the photograph thumb, but I cant find any way to set a transition effect to make the overlays on the MouseOver layer fade in.

So my question is, can transition effects be set for images in the MouseOver layer and how?

I am using Xara Web Designer 9 Premium.

Many thanks
Tom

[Acorn]

Tom, I can offer the following, which fades out the MouseOff thumbnail to 50% opacity.

For each thumbnail add the Name

htmlclass=fade

For the Page HTML code (head), add:

<style>
.fade {
   opacity: 1;
   transition: opacity 1.25s ease-in-out;
   -moz-transition: opacity 1.25s ease-in-out;
   -webkit-transition: opacity 1.25s ease-in-out;
   }


   .fade:hover {
      opacity: 0.5;
      }
</style>

Any image with a class of fade will now fade away in 1.25 seconds.
No need for any additional Layers.

Acorn

[Rocketman]

Tom, I can offer the following, which fades out the MouseOff thumbnail to 50% opacity.

For each thumbnail add the Name

htmlclass=fade

For the Page HTML code (head), add:

<style>
.fade {
   opacity: 1;
   transition: opacity 1.25s ease-in-out;
   -moz-transition: opacity 1.25s ease-in-out;
   -webkit-transition: opacity 1.25s ease-in-out;
   }


   .fade:hover {
      opacity: 0.5;
      }
</style>

Any image with a class of fade will now fade away in 1.25 seconds.
No need for any additional Layers.

Acorn

Thanks Acorn

I used the code you supplied, changing the opacity to zero so that the image 'underneath' the photograph becomes revealed when you hover the cursor over the top image - which basically seems to have the same effect as using an overlay.

However I could not get the transition to work - I tried changing the values specified in the code to make the transition longer, but the effect is just that the top image disappears straight away when you hover over it. There is no gradula fade in/out of the image. Am I doing something wrong?

THanks for your help with this

Tom

[Acorn]

Tom, you need to change all time values:

<style>
.fade {
opacity: 1;
transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
}
.fade:hover { opacity: 0; }
</style>

Acorn

[gwpriester]

I did something like this years ago using an animated GIF as a button. But it seems like you would need to create a separate animation for each button.