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
JavaScript
x
16
16
1
<script>2
$(document).ready(function(){3
var $mainImg = $("#main");4
var $mainLink = $("#header > a");5
$(".thumbs").mouseover(function(){6
var src = $(this).attr("src");7
var link = $(this).parent().attr("href");8
console.log(link);9
var doubleWidth = $(this).width()*3;10
var doubleHeight = $(this).height()*3;11
$mainImg.attr("src",src);12
$mainImg.css({"width":doubleWidth,"height:":doubleHeight})13
$mainLink.attr("href",link);14
});15
});16
</script>JavaScript
1
34
34
1
<body>2
<style>3
#footer{4
float:none;5
6
7
}8
9
</style>10
<div id="header">11
<a href="{% url 'new' %}">12
<img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people">13
</a>14
</div>15
<div id="footer">16
<a href="#">17
<width="auto" height="auto" alt="people">18
</a>19
<a href="#">20
<img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake">21
</a>22
<a href="{% url 'new' %}">23
<img class="thumbs" src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined">24
</a>25
<a href="#">26
<img class="thumbs" src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex">27
</a>28
<a href="#">29
<img class="thumbs" src="{% static 'images/banner/pic8.jpg' %}"width="200" height="200" alt="yoga">30
</a>31
</div>32
33
34
</body>Advertisement
Answer
Edited after clarification.
You can easily use flex to re-align the images vertically.
JavaScript
1
13
13
1
body {2
display: flex;3
}4
5
#header {6
align-self: center;7
}8
9
#footer {10
display: flex;11
flex-direction: column;12
}13
JavaScript
1
38
38
1
<body>2
<style>3
body {4
display: flex;5
}6
#header {7
align-self: center;8
}9
#footer {10
display: flex;11
flex-direction: column;12
}13
</style>14
<div id="header">15
<a href="{% url 'new' %}">16
<img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people">17
</a>18
</div>19
<div id="footer">20
<a href="#">21
<width="auto" height="auto" alt="people">22
</a>23
<a href="#">24
<img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake">25
</a>26
<a href="{% url 'new' %}">27
<img class="thumbs" src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined">28
</a>29
<a href="#">30
<img class="thumbs" src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex">31
</a>32
<a href="#">33
<img class="thumbs" src="{% static 'images/banner/pic8.jpg' %}" width="200" height="200" alt="yoga">34
</a>35
</div>36
37
38
</body>