I want to flip the footer <div> vertically without it affecting the header div how to do it? I have tried every possible but could not achieve so. I have tried CSS properties but can not do I want the header image to be there just flipping the footer <div> and all the things should remain as it is.
Any help will be appreciated.
This is how it appears webpage
I want like this Image of what I want this to appear
<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>
#footer{
float:none;
}
</style>
<div id="header">
<a href="{% url 'new' %}">
<img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people">
</a>
</div>
<div id="footer">
<a href="#">
<width="auto" height="auto" alt="people">
</a>
<a href="#">
<img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake">
</a>
<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>
</body>Edited after clarification.
You can easily use flex to re-align the images vertically.
body {
display: flex;
}
#header {
align-self: center;
}
#footer {
display: flex;
flex-direction: column;
}
<body>
<style>
body {
display: flex;
}
#header {
align-self: center;
}
#footer {
display: flex;
flex-direction: column;
}
</style>
<div id="header">
<a href="{% url 'new' %}">
<img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people">
</a>
</div>
<div id="footer">
<a href="#">
<width="auto" height="auto" alt="people">
</a>
<a href="#">
<img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake">
</a>
<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>
</body>