how to resize responsive image up and down

by

The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    .box img {
        transition: width .4s,margin .4s,max-width .4s;
        transition-property: width, margin, max-width;
        transition-duration: 0.4s, 0.4s, 0.4s;
        transition-timing-function: ease, ease, ease;
        transition-delay: 0s, 0s, 0s;
    }
    .box img.clicked{
        width: 500px;
     }
    </style>

    <script>
    $(function(){
        $('.box img').on('click', function() {
            $(this).toggleClass('clicked');
        });
    });
    </script>
</head>
<body>
    <div class="box">
        <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
    </div>
</body>
</html>

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. How do I make two images fade in/out repeatedly? [closed]
  3. How to get image size (height & width) using JavaScript?
  4. Check if an image is loaded (no errors) with jQuery
  5. Changing the image source using jQuery
  6. Asynchronously load images with jQuery
  7. How to resize images proportionally / keeping the aspect ratio?
  8. How do you cache an image in Javascript
  9. Image preloader javascript that supports events
  10. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  11. Using jQuery, Restricting File Size Before Uploading
  12. In Bootstrap open Enlarge image in modal
  13. Disable dragging an image from an HTML page
  14. Load image with jQuery and append it to the DOM
  15. How do I abort image load requests without using window.stop()
  16. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  17. Get image width and height from the Base64 code in JavaScript
  18. How to get the image size (height & width) using JavaScript
  19. Cancel single image request in html5 browsers
  20. Sort by image resolution in gallery
  21. Add image in pdf using jspdf
  22. jQuery resize to aspect ratio
  23. How to create a new img tag with JQuery, with the src and id from a JavaScript object?
  24. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  25. Center an Image vertically and horizontally using CSS
  26. canvas- Cropping images in different shapes
  27. How do I get natural dimensions of an image using JavaScript or jQuery?
  28. How should I crop an image at client side using jcrop and upload it?
  29. Remove selected file(s) before upload with Javascript
  30. Crop image white space automatically using jQuery

Leave a Comment