Rollover zoom not covering when launched

[Pitoulet]

Hello,

I have implemented a transition animation when the mouse hovers a picture. I want the small picture to be expanded and I used the transform option. It works when I preview the page but when the image expands by 2 in Y and X, the picture covers the other thumbnails but not the text below which appears superimposed on the picture. That is not what I want. In a different post, I saw a user recommending to check something like "front" so that it stays on top but I could not find this box. Would you please let me know how to make sure the scaled-up image remains on top?

Some websites implement a rollover magnifier which brings a larger image in the area over which the mouse floats. Can we do this in WYSIWYG Web Builder also? Thank you.

Pitoulet -

[BaconFries]

I saw a user recommending to check something like "front" so that it stays on top but I could not find this box

You can do this by clicking/selecting on the text and use either Move it to Front/Back

[Pablo]

Some websites implement a rollover magnifier which brings a larger image in the area over which the mouse floats.

Do you mean this?
https://www.wysiwygwebbuilder.com/elevatezoom.html

[Pitoulet]

Hello Pablo, this looks like what I need. I will give it a try, thank you!

[Pitoulet]

Thank you BaconFries, I looked at the text properties and could not find the Move it to Front/Back, in which tab is it hidden? Thank you.

[Pablo]

You will find those commands in the Arrange menu.

[Pitoulet]

I've tried many different things with the Arrange menu, whether it is the text or the image or the layout grid, can't have the image covering the text when scaled through mouse click, see with this https://powersimtof.com/Downloads/temp/pix.jpg. The pictures are the same format.

[BaconFries]

Showing just a image(s) screenshot doesn't really help. It is always best to simply provide a basic "Demo" by this it means a "Copy" of your project (.wbs). Please see the following: How do I share my project to get help?

[Pitoulet]

Thank you for the kind offer, I have uploaded this small project through this URL https://powersimtof.com/Spice.htm. Basically, when you click on the left-side book (the one with the blue color), the page opens and if you click on the thumbnails featuring a picture, that is where I see the issue of some text being covered or not. I thank you for your kind assistance!

Besides, and this might be related, I have difficulties to exactly have images sharing identical dimensions. You can see the orange book in list is of smaller dimension despite all my efforts to resize and it is not the best effect. I think I read in one post that all images must already of similar sizes before being imported in the layout grid? So adjusting their size first on PPT for example and then individually saving them before import would be a good way to ensure exact dimensions? Because I also have had the case where the pix look similar in WYSIWYG but then are mismatched when pressing F5.

Pitoulet

[Pablo]

To solve the problem with the order, you will have to add a z-index, otherwise the next object will overlap the (previous) image.

You can add a z-index via Page HTML.

For example:

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    position: relative;
}
<style>

[Pitoulet]

I think I kind of understand how the z-index manages the layers but, for instance:

<div id="wb_Image1" style="display:block;width:100%;height:auto;z-index:6;">

I see that wb_Image6 is assigned a z-index of 6 but when selecting the image and pushing the back or front button several times in the Arrange menu does not change anything in the Page HTML code, why is that? Also, perhaps having the z-number displayed in the property would be useful without exploring the HTML code.

I have seen you can edit parts of the code via the section tabs in the Page HTML but I have no idea where to insert the lines you recommended to add and what they do. I'm going to leave it like it is, no problem, thanks for trying to help Pablo.

[BaconFries]

Page HTML Between the <head></head> tags*

[Pablo]

I see that wb_Image6 is assigned a z-index of 6 but when selecting the image and pushing the back or front button several times in the Arrange menu does not change anything in the Page HTML code, why is that?

Because the image is inside a container (layout grid) so it has nowhere to go, when using move to front or move to back.
The arrange tools only have effect where there is more than one item in the same container.

[wwonderfull]

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    positive: relative;
}
<style>

Maybe it was to be meant to be like what we have below

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    position: relative;
}
</style>

[Pablo]

Correct

[Pitoulet]

Thank you gents, I think I begin to understand - sorry, I am a power electronics engineer not a software developer : )
So I changed the code to:

<style>
#wb_Image4, #wb_Image5
{
z-index: 9999 !important;
position: relative;
}
<style

so that it sets the highest possible z-index to the two images 4 and 5 that need to top on any other images when scaled. However, I had to insert it in "End of Page" tab. The suggestion kindly given by BaconFries was making the page entirely blank. I believe that this short code is now inserted at the end the html code and it works. Is it the correct way? Thanks a lot!

[Pablo]

If the page is blank then you may not have copied the complete code. I am sure it should be placed between the head tags and not at the end of the page.

[Pitoulet]

I just checked again and if I insert the exact same code:

<style>
#wb_Image4, #wb_Image5
{
z-index: 9999 !important;
position: relative;
}
<style

in the "Between <head></head> tags" tab, F5 only displays the page background, all the rest is gone.

However, if the last line is </style and not <style, then it works! So the code you provided missed the "/"?

[BaconFries]

sorry, I am a power electronics engineer not a software developer : )

And I am a Web Developer..the code you are using is invalid! css should be inserted as I mentioned and not before the <html> it may work but it is not the correct to use!.

is it the correct way?

No..it is not correct see the following example originally provided by Pablo and insert as I mentioned! Note the closing >

To solve the problem with the order, you will have to add a z-index, otherwise the next object will overlap the (previous) image.

You can add a z-index via Page HTML.

For example:

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    position: relative;
}
<style>

[Pitoulet]

As I said, if I insert the original code with <style> as a closure line, the entire page is blank when I insert in the tab you did recommend - which also makes sense to me by the way, it has to be on top.

Because I was not satisfied with the insertion at the end of the page, even if it did work, I searched a bit and found that if the closure line is </style> then it works in the inserted tab. Is it now correct or still I am missing something? Thanks!

[wwonderfull]

For example:

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    position: relative;
}
<style>

there is a / missing on the end. </style>

so the correct code is

Code: Select all

<style>
#wb_Image1, #wb_Image2 , #wb_Image3, #wb_Image4 
{
    z-index: 9999 !important;
    position: relative;
}
</style>