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>