sliding image css3 only or javascript needed?

Question

I'm stuck in a drupal project, I would like to know how to get this effect done please, the left image will expand to right on click and same I want to the right image which will expand left on click, I want to know if it can be done by css3 only or javascript needed and how please... here are two image for my issue, I am mainly as front-end developer and know little of backend, so if anyone can help please..!

http://s14.postimg.org/aahx57ke9/img.png

Answer 1

If you want the image to slide and stay in that position after letting go of the mouse button, you have to use JavaScript.

I recommend jQuery. Here is an example illustrating how you can use JavaScript to slide elements and seamlessly superimpose them over each other, with jQuery animations; the JFiddle link at the bottom will show you the HTML, CSS, and JavaScript. It should be perfectly applicable to your image situation, assuming the images are positioned absolute.

JavaScript:

var b1 = $('#block1');
var b2 = $('#block2');

function slide(block, left, callback)
{
    block.animate({
        'left': left
    }, 750, function() {
        // Do this after finished animating.
        if (callback) callback();
    });
}

b1.on('click', function() {
    // Only slide if not already done.
    if (b1.css('left') != '-50px') {
        // First slide both elements so they meet at the,
        // middle, then switching the z-index is not noticeable.
        slide(b1, '-250px');
        slide(b2, '250px', function() {
           // After animating, superimpose b1 over b2
           // by changing z-index order, then animate
           // the rest of the way.
           b1.css('z-index', '1');
           b2.css('z-index', '0');
           slide(b1, '-50px');
       });
    }
});

b2.on('click', function() {
    // Same here but with right element.
    if (b2.css('left') != '50px') {
        slide(b1, '-250px');
        slide(b2, '250px', function() {
           b1.css('z-index', '0');
           b2.css('z-index', '1');
           slide(b2, '50px');
       });
    } 
});

Check it out in action here: https://jsfiddle.net/86sr3okk/6/

Welcome to the wonderful world of JavaScript.