Learn to code

Full Project

  • @raymondng
    Raymond Ng

    FREE Lessons - Build full Modern Agency website with HTML5, CSS3...

    view all


    Build Modern Agency Website

  •   

      

CSS/CSS3

  • Slide image on mouse hover with timing transition in CSS3

    <html>
    <head>
    <title>Sample</title>
    <style>
    img.rotate {
    width: 140px; height: 100px; float: left;
    -moz-transition-property: opacity, translateX;
    -o-transition-property: opacity, translateX;
    -webkit-transition-property: opacity, translateX;
    transition-property: opacity, translateX;
    -moz-transition-duration: 2s, 4s;
    -o-transition-duration: 2s, 4s;
    -webkit-transition-duration: 2s, 4s;
    transition-duration: 2s, 4s;
    }
    img.rotate:hover {
    opacity: .2;
    -webkit-transform: translateX(60px);
    -moz-transform: translateX(60px);
    -ms-transform: translateX(60px);
    -o-transform: translateX(60px);
    transform: translateX(60px);
    }
    </style>
    </head>
    <body>
    <p><img src = "https://via.placeholder.com/140x100"; alt = "Slide image on mouse hover in CSS3" class = "rotate"></p>
    </body>
    </html>

  •   

      

Jquery

  • Display content onClick using Jquery

    <html>
    <head>
    <title>Sample</title>
    <script>
    $(function() {
    $('.pickcolor').on("changeColor", function(event, colour, text){
    $(this).html(text);
    $(this).css("color", colour);
    });
    $("button").click(function(){
    var colour = $(this).attr("rel");
    $('.pickcolor').trigger("changeColor", [colour, colour + ' color is selected']);
    });
    });
    </script>
    </head>
    <body>
    <button rel="red">I'm a Red color</button>
    <button rel="blue">I'm a Blue color</button>
    <p class="pickcolor"></p>
    </body>
    </html>

  •