Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1

    Default Image hover enlargement

    Hello.

    One question: is there a way to make this:
    when I point mouse over the image or vector object, to show that object enlarged (2x, 3X size or more) ?
    I mean the same thing when we click to object, and the it show enlarged in pop-up photo menu dialog.
    I am sure that it is possible, but I don't know how ...

  2. #2
    Join Date
    Mar 2009
    Posts
    4,522

    Default Re: Image hover enlargement

    Copy the object and paste it on a new layer. In the Layer Gallery, make sure the new layer is situated above the MouseOver layer. Enlarge the copied object to the desired size and position it where you want it to appear. With the original object selected, go to Utilities/Web Animation/Mouse-over and under 'Show pop-up layer', select the layer on which the copied and enlarged object is placed. Click Apply.

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image hover enlargement

    Clone the object.
    Scale x2 or x3 and place in the MouseOver layer.

    Select the original.
    In Web Properties > Image > Photo pop-up, set the width to a multiple of the pixel width of the original.

    Soft-group both objects.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4

    Default Re: Image hover enlargement

    Yes, that's it. Thank you guys
    But Acorn, Boy's way is exactly what I want, just to hover mouse over the object, without click on it.
    Your instruction implies that I have to click on it.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Re: Image hover enlargement

    Quote Originally Posted by Dencuga View Post
    Yes, that's it. Thank you guys
    Dencuga, also untick Clip to page edges in the Web Properties > Website tab if the objects are close to the page edge and you want them to be fully visible.

    Do note Boy's approach is different to mine.

    I believe his will not hover.
    Each pop-up needs to be on a different layer.

    Mine relies on the built-in HighSlide component.
    You end up with three separate objects.

    I personally use some CSS for the hover part:
    Code:
    <style>
    .twice {
      transition: 1200ms;
    }
    .twice:hover {
      transform: scale(200%);
    }
    </style>
    The downside is if you scale too much, the resolution may suffer.

    Acorn
    Last edited by Acorn; 29 August 2021 at 01:50 PM.
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Mar 2009
    Posts
    4,522

    Default Re: Image hover enlargement

    Quote Originally Posted by Acorn View Post
    Do note Boy's approach is different to mine.

    I believe his will not hover.
    It sure will.

  7. #7

    Default Re: Image hover enlargement

    Acorn, please can you submit XWD file with that sample ?

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image hover enlargement

    Quote Originally Posted by Boy View Post
    It sure will.
    Boy, great to be corrected.
    I misread your Web Animation part.

    @Dencuga
    If you want the hover to have the pop-up appear anywhere, use Boy's approach, as you have stated.
    If the MouseOff and MouseOver objects are overlapping then place on the MouseOver layer; this saves lots of additional Layers. The MouseOff object will need a Link (I use javascript: ; for this).
    To avoid any extra images or layers, use my code. Just add a name htmlclass="twice" to every required object.
    I read into your OP that you wanted both. Apologies.

    An elaboration of my code has already ben covered in https://www.talkgraphics.com/showthr...le-Image-Hover.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Image hover enlargement

    Quote Originally Posted by Dencuga View Post
    Acorn, please can you submit XWD file with that sample ?
    Here is a demo of both approaches: CSS - Hover demo.xar

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •