Search code examples
javascriptjquerycssimagescale

image not scaling on jquery event

Ok so I am trying to use .addclass and removeclass in conjunction with CSS to enlarge an image on mouseover but return it to mover on mouse leave. I know I can do this purely in Jquery and also purely in css but for the purposes of this excersize I am trying to use both

It's not working with what I have now, I'm a little confused by the transform and transition properties and I am probably writing them wrong. I am not sure if this is an issue but I am using a 960 12 col grid stylesheet

EDIT: contrary to my comment below where i simply moved the transition from one class to another. This did not work correctly, adding a browser compatible (transition: transform 5s;)to both .image and scale_image provided the desired effect

DEMO

  <!doctype html>
   <html>
<head>
    <meta charset="UTF-8">
    <link href="stylesheets/960_12_col.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        body {
            font-size:62.5%;
            background:url('images/vintageocean.jpg')no-repeat repeat                 center fixed;
        }
        #gallery {
            padding-top:1em;
        }   

        .image {
            width:25em;
            height: 20em;
            transition: transform 5s;

            }
        .first_row {
            margin-bottom:15em;
        }   

        .scale_img {
        transform: scale(2);
        -webkit-transform: scale(2);
        -o-transform: scale(2);
        -moz-transform: scale(2);
                     transition: transform 5s;
       }

    </style>

    <script>
    $(document).ready(function() {

    $(".image").mouseenter(function() {
        $(this).addClass("scale_img");
    });

        $(".image").mouseleave(function() {
            $(this).removeClass("scale_img");
        });
    });



    </script>
</head>
<body>
    <div id="wrapper" class="container_12">
        <header>
            <h1> Scaling </h1>
        </header>
        <div id="galleryheader">
            <h2> Albums<h2>
        </div>
        <section id="gallery">          
            <img id="avery" class=" image first_row prefix_2 grid_3 suffix_1" src='images/OAI.jpg' alt= "On Avery Island Album Art">
            <img id="overthesea" class=" image first_row prefix_1 grid_3 suffix_2" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">   
            <img id="beauty" class=" image second_row prefix_2 grid_3 suffix_1" src='images/beauty.jpg' alt="Beauty Demo Album Art">
            <img id="everthingIs" class=" image second_row prefix_1 grid_3 suffix_2" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
        </section>
    </div>  
</body>

Solution

  • When referring to a CSS class write .image instead of only image like this:

    $(document).ready(function() {

    $(".image").mouseenter(function() {
        $(this).addClass("scale_img");
    });

        $(".image").mouseleave(function() {
            $(this).removeClass("scale_img");
        });
    });