podgląd 2 obrazka po jego najechaniu

Question

                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <!-- ITEM 1 -->
                        <img id="img1" class="lookbook-images" src="shop/item1/1.jpg" style="max-width:100%;"></div>
                        <div class="simpleCart_shelfItem text-center">
                            <h5 class="item_name"> szer </h5>
                            <span class="item_price">PLN 70</span><br>
                            <p> <select class="item_size">
                                    <option value="XS"> XS </option>
                                    <option value="S"> S </option>
                                    <option value="M"> M </option>
                                    <option value="L"> L </option>
                                    <option value="XL"> XL </option>
                                    <option value="XXL"> XXL </option>
                                </select><br><br>
                                <a class="item_add mybtn" href="javascript:;"> Add to Cart </a></p>
                        </div>
                    </div>

mam taki skrypt i chciałbym aby po najechaniu na na #img1

pojawił się obrazek 2.jpg

Próbowałem js ale za dużo mi tego wyjdzie i strona zamula :c 

a CSS nie wiem jak to wykminić żeby to dobrze działało.

Answer 1

Witaj

Nie wiem czy dobrze zrozumiałem, ale stworzyłem coś takiego

https://codepen.io/hello-michal/pen/rgMKzm

Comments

Zrobiłem to w taki sposób jak podałeś ale to zdjęcie które znika jest u mnie większe

---

W moim przykładzie zdjęcia miały taki sam rozmiar, jeżeli ty w swoim projekcie masz dwa zdjęcia o innych rozmiarach to to jedno będzie większe, może spróbuj zrobić tak że zdjęcia mają zajmować 100% dostępnej przestrzeni?

img{
width: 100%
}