How to move element from its position to a center - html

Question

I have three elements and once I clicked one of it I want to move it to the center but from its position with a transition of, for example, 1 second. Also, I want to increase fade the text and show another text during the time when the box increases from 150px to 200px but for now I just don't know how to center it on a click. I did it but it goes from bottom right to the center but I want it to go from its position.
Also, I tried using $(this) to get certain div but it just didn't work
$(document).ready(function(e) {
$('.second').click(e => {
$('.second').addClass('red')
})
});
.main {
display: flex;
gap: 15px;
height: 90vh;
justify-content: center;
align-items: center;
position: relative;
}
.block {
width: 150px;
height: 100px;
box-shadow: 0px 0px 3px #000;
}
.red {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
transition: 1s ease;
color: red;
#keyframes rise;
#keyframes rise {
0% { width: 200px; height: 200px }
100% { width: 150px; height: 150px }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class="first block">Hello</div>
<div class="second block">Hi</div>
<div class="third block">hello</div>
</div>

Answer 1

Just change offset values of that element on click.

Answer 2

This is happening because everything is transitioning,
the sequence of centering the div in your code is like this:
First, its position becomes absolute
then it goes to the bottom right direction because you have top 50%; left 50%;
then it comes back to the center because of transform: translate( -50%, -50%)
You can fix it to ways:
Change the centering method to margins
$(document).ready(function(e) {
$('.second').click(e => {
$('.second').addClass('red')
})
});
.main {
display: flex;
gap: 15px;
height: 90vh;
justify-content: center;
align-items: center;
position: relative;
}
.block {
width: 150px;
height: 100px;
box-shadow: 0px 0px 3px #000;
}
.red {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 150px;
height: 150px;
transition: 1s ease;
color: red;
#keyframes rise;
#keyframes rise {
0% { width: 200px; height: 200px }
100% { width: 150px; height: 150px }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class="first block">Hello</div>
<div class="second block">Hi</div>
<div class="third block">hello</div>
</div>
In this way, the div goes nowhere, just to the center.
Second way is to not transition position and transform
$(document).ready(function(e) {
$('.second').click(e => {
$('.second').addClass('red')
})
});
.main {
display: flex;
gap: 15px;
height: 90vh;
justify-content: center;
align-items: center;
position: relative;
}
.block {
width: 150px;
height: 100px;
box-shadow: 0px 0px 3px #000;
}
.red {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
transition: 1s ease;
transition-property: width, height, color;
color: red;
#keyframes rise;
#keyframes rise {
0% { width: 200px; height: 200px }
100% { width: 150px; height: 150px }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class="first block">Hello</div>
<div class="second block">Hi</div>
<div class="third block">hello</div>
</div>
The transition-property Property defines which properties to transition so, I put: width, height and color. You can change what you wanna transition