I want to make it like thiswhat I want but I am not able to do it. I am unable to do so what I am getting what I have. I want to flip position as well as to make them appear in the same div. Any help will be appreciated
<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>