Quiero hacer así lo que quiero pero no soy capaz de hacerlo. No puedo hacer lo que estoy obteniendo lo que tengo . Quiero cambiar de posición y hacer que aparezcan en el mismo div. Cualquier ayuda será apreciada
<script> $(document).ready(function(){ var $mainImg = $("#main"); var $mainLink = $("#header > a"); $(".thumbs").mouseover(function(){ var src = $(this).attr("src"); var link = $(this).parent().attr("href"); console.log(link); var doubleWidth = $(this).width()*3; var doubleHeight = $(this).height()*3; $mainImg.attr("src",src); $mainImg.css({"width":doubleWidth,"height:":doubleHeight}) $mainLink.attr("href",link); }); }); </script> <body> <style> </style> <div id="header"> <a href="{% url 'new' %}"> <img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="60%" height="250" alt="people"> </a> </div> <div id="footer"> <img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake"> <a href="{% url 'new' %}"> <img class="thumbs" src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic8.jpg' %}"width="200" height="200" alt="yoga"> </a> </div> $(".js-post").on("mouseover", function() { const mainSrc = $(".js-main").attr("src"); const targetSrc = $(this).attr("src"); $(".js-main").attr("src", targetSrc); $(this).attr("src", mainSrc); }); .wrapper { display: flex; } .main-view { width: 300px; margin-right: 1rem; } .thumbnail-view { width: 100px; } .post { width: 100%; height: auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="main-view"> <div>heading</div> <img class="main js-main" src="https://picsum.photos/300/200?random=1" /> </div> <div class="thumbnail-view"> <img class="post js-post" src="https://picsum.photos/300/200?random=2" /> <img class="post js-post" src="https://picsum.photos/300/200?random=3" /> <img class="post js-post" src="https://picsum.photos/300/200?random=4" /> <img class="post js-post" src="https://picsum.photos/300/200?random=5" /> </div> </div>