jquery - jQuery レイアウトを崩さずに画像サイズを大きくする

Question

前セクションと後セクションの 2 つの画像リストがあります。jquery を使用して、他の画像のレイアウトを乱すことなく、クリックされた画像のサイズを大きくするにはどうすればよいですか。

<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>