Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Magnification Scale Hover Effect

    I'm using a css coding to enlarge/scale images when hover. The code works very nice. However, it makes all the images on my page to have the scale effect. What can I do to make it work on just some images?
    Here is the code I'm using:
    http://www.priteshgupta.com/2011/06/.../#comment-1058
    Thanks!

    eedesign

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello eedesign,
    Give those images you wish to have the effect a class so you can style them seperately from other images on your page.

    Something like this <img src="your.jpg" alt="description" class="scale" />

    Then your CSS would be like this
    Code:
    img.scale {
    -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        transition: all 200ms linear;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }
    img.scale:hover {
    -webkit-transform: scale(1.1) translateZ(0);
        -moz-transform: scale(1.1) translateZ(0);
        -o-transform: scale(1.1) translateZ(0);
        transform: scale(1.1) translateZ(0);
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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