JavaScript

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>

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>

Flip div vertically

Advertisement

Answer