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