Welcome to TalkGraphics.com
Results 1 to 7 of 7
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Lightbulb Homespun Web Animations with Roll-over or Click Effects

    This is a development from a simple approach to hovering over a Black & White image so that it turns full colour.
    This approach uses just one image and applies a greyscale filter to it that is removed when hovered on.

    The Recipe
    • One Full Colour Image
    • It is given a ClassName in Names: htmlclass="bw"
    • It has some CSS on the page (in a Placeholder Head or the Page head):

    <style>
    [class*="bw"] {
    filter: grayscale(100%);
    transition: 0.507s ease-in-out;
    }
    .bw:hover {
    filter: grayscale(0%);
    }
    </style>

    • I could have used .bw { ... } rather than [class*="bw"] { ... } but I can develop the CSS code with my choice.
    • A hover changes the greyscale to nothing in a transition time that you can alter; ease-in-out is a smoothing control on how the effect fades.


    So I want to only apply the effect when I click on the image.

    So I clone the image, and:
    • Change its ClassName to htmlclass="bw-clk"
    • Add another hover selector to make .bw:hover, .bw-click:active { ...
    • Change the cursor when over the image to indicate a click is required:

    .bw-clk {
    cursor: pointer;
    }

    In my demonstration file, CSS - Hovers & Clicks.xar, the top-most two images show this effect.
    The following middle four images use the same simple approach to achieve differing effects.
    The 'fade-out' and 'shrink' actually make the top image disappear, leaving another object underneath.

    The bottom set can use any of the 50 listed Xara Effects, plus another 70+ (page) effects that Xara cripples to far fewer in its UI:
    • Here you can alter the timing and delay to the millisecond.
    • You can also set the Effect to repeat any number of time (including infinite) for as long as the image is hovered on click over.

    The empty Hourglass is used to invoke the ani.css collection of listed effects.

    The CSS Symbol between each pair allows you to copy that effect to your design where you then add the required ClassName(s) to any number of images.

    I hope you see the power of what is a fairly simply set of widgets.

    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

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    Some good effects there Acorn. Here's my attempt, it changes from B&W to colour slightly then reveals the B&W version below with coloured fruit.

    LINK
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

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

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    Quote Originally Posted by Egg Bramhill View Post
    Some good effects there Acorn. Here's my attempt, it changes from B&W to colour slightly then reveals the B&W version below with coloured fruit.
    LINK
    Yes Egg, effective. Your under image is slightly displaced and it has a faint grey box near the top.

    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
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    I used that effect for decades on the local site I hosted for artists here in Placitas. But of course I had to use two images, grayscale with color on the mouse over layer. This is a much better solution.

    The site is coming down soon and I no longer host the site but here is one example: http://placitasartists.com/gallery_09.html

    On the home page I use a similar effect. The images are in color but the saturation is cranked back. On mouse over the color goes back to full saturation. Is this possible with this CSS approach?

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

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    Quote Originally Posted by gwpriester View Post
    I used that effect for decades on the local site I hosted for artists here in Placitas. But of course I had to use two images, grayscale with color on the mouse over layer. This is a much better solution.
    The site is coming down soon and I no longer host the site but here is one example: http://placitasartists.com/gallery_09.html
    On the home page I use a similar effect. The images are in color but the saturation is cranked back. On mouse over the color goes back to full saturation. Is this possible with this CSS approach?
    Gary, very easily.

    Instead of filter: grayscale(100%);, change it to filter: grayscale(65%);.

    You can also crank up the .bw:hover state by altering the filter: grayscale(0%) contrast(125%) saturate(150%);.

    To do the approach justice, have a play with https://css-tricks.com/almanac/properties/f/filter/.

    If you need to apply something you like, I'm there to advise.

    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

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    If you need to apply something you like, I'm there to advise.
    I appreciate that. But, I am completely out of the web design business. I turned over the last of my sites to a colleague. It's a relief to tell the truth.

  7. #7
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: Homespun Web Animations with Roll-over or Click Effects

    Quote Originally Posted by Acorn View Post
    Gary, very easily.

    Instead of filter: grayscale(100%);, change it to filter: grayscale(65%);.

    You can also crank up the .bw:hover state by altering the filter: grayscale(0%) contrast(125%) saturate(150%);.

    To do the approach justice, have a play with https://css-tricks.com/almanac/properties/f/filter/.

    If you need to apply something you like, I'm there to advise.

    Acorn
    Interesting ideas Acorn - had a play using the sepia and contrast filters, added a standard Xara animation, and a link from the photo to its website. The result is posted to an old demo for hovers:

    https://initiostar.co.uk/demo/hoverZoom/

    Thanks for the concepts.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

 

 

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
  •