Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages.
First page:
More pages:
2 pages have the same format and 1 has another format.
$(".js-post").on("mouseover", function() {
const mainSrc = $(".js-main").attr("src");
const targetSrc = $(this).attr("src");
$(".js-main").attr("src", targetSrc);
$(this).attr("src", mainSrc);
});.wrapper {
display: flex;
width: 100%;
padding-left: 200px;
padding-top: 30px;
}
.main-view {
width: 70px;
height: 500px;
margin-right: 30rem;
object-fit: cover;
}
img.main.js-main {
width: 500px;
object-fit: cover;
height: 400px;
}
thumbnail-view {
width: 200px;
padding-top: 20px;
height: auto;
}
.post {
width: 100%;
height: 100px;
}
.box {
background: white;
top: 50%;
left: 50%;
padding: 10px;
}
box .imgBx {
width: 150px;
}
* {
font-family: 'Lato', sans-serif;
}
.hey {
display: flex;
width: 70%;
justify-content: space-around;
margin-top: 100px;
margin-left: 180px;
margin-bottom: 100px;
}
.card {
width: 280px;
height: 260px;
padding: 2rem 1rem;
background: grey;
display: flex;
position: relative;
align-items: flex-end;
transition: 0.5s ease-in-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
card:hover {
transform: translateY(20px);
}
card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 176, 155, 0.5), rgba(150, 201, 61, 1));
z-index: 2;
transition: 0.5s all;
opacity: 0;
}
card:hover:before {
opacity: 1;
}
card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
card.info {
position: relative;
z-index: 3;
color: black;
opacity: 0;
transform: translateY(30px);
transition: 0.5s all;
}
card.info h1 {
padding-top: 25px;
font-size: 30px;
padding-left: 70px;
padding-right: 50px;
}
card.info.btn {
text-decoration: none;
background: rgb(70, 218, 203);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease-in-out;
margin-top: 20px;
margin-left: 70px;
}
card:hover.info {
opacity: 1;
transform: translateY(0px);
}
footer {
padding: 50px 0;
background-color: rgb(70, 218, 203);
bottom: 0;
padding: 2px 0px 5px 0px;
position: relative;
margin-top: auto;
clear: both;
}
.on {
width: 70px;
white-space: nowrap;
height: 30px;
margin-left: 170px;
margin-top: 60px;
position: absolute;
}
on p {
font-weight: bold;
}<!-- jQuery dependency -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Body -->
<div class="wrapper">
<div class="main-view">
<div>heading</div>
<img class="main js-main" src="{% static 'images/banner/pic9.jpg' %}" width="300px" height="100" alt="yoga">
</div>
<div class="thumbnail-view">
<div class="box">
<div class="imgBx">
<img class="post js-post" src="{% static 'images/banner/pic1.jpg' %}" height="100" alt="handshake">
</div>
</div>
<div class="box">
<div class="imgBx">
<img class="post js-post" src="{% static 'images/banner/pic5.jpg' %}" width="300px" height="100" alt="peoplejoined">
</div>
</div>
<div class="box">
<div class="imgBx">
<img class="post js-post" src="{% static 'images/banner/pic8.jpg' %}" width="300px" height="100" alt="peoplejoined">
</div>
</div>
<div class="box">
<div class="imgBx">
<img class="post js-post" src="{% static 'images/banner/pic7.png' %}" width="300px" height="100" alt="peoplejoined">
</div>
</div>
</div>
</div>
<div class="on">
<p> Must Read </p>
</div>
<div class="hey">
<div class="card">
<img src="{% static 'images/banner/m.PNG' %}">
<div class="info">
<h1>US's Miami Fashion </h1>
<a href="#" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="{% static 'images/banner/c.PNG' %}">
<div class="info">
<h1>Muted demand for cotton </h1>
<a href="#" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="{% static 'images/banner/ss.jpg' %}">
<div class="info">
<h1>Srilanka garment export </h1>
<a href="#" class="btn">Read More</a>
</div>
</div>
</div>