CODEWITHSUNDEEP
jqueryhtmlcssimage
psycho
psycho

Reputation: 1611

jQuery Increase image size without disrupting layout

I have two lists of images for a before and after section. How can i use jquery to increase the size of an image that is clicked without disrupting the layout of the other images.

<div id="concept-reality-wrapper">
    <div class="col-1">

        <h2>Concept</h2>

        <ul>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
        </ul>

    </div>

    <div class="col-2">

        <h2>Reality</h2>

        <ul>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
        </ul>

    </div>
</div>

Upvotes: 0

Views: 234

Answers (1)

vsync
vsync

Reputation: 130471

Do it with CSS only..you can see how it's done in my gallery: http://dropthebit.com/demos/photobox/

Basically you just use transform:scale() and that doesn't effect anything but scales the thing.

Upvotes: 1

Related Questions