How can I bring up in CSS the image of the avatar at the bottom of the posts of the Stories part in-CodePudding

I would like to move the avatar located at the bottom of the Title of each post from the "STORIES" part circled in RED on the following screenshot:

So that it goes up and positions itself at the bottom of the post card like this:

But, the problem on my end is that when I try to do that, adding a margin-top: -122px; for example, hoping to succeed in bringing up the icon of the avatar in question, it does not work at all. Here is the code and CSS class of the avatar in question that I am trying to pull up to the bottom of the post card:

img.avatar.avatar-96.photo.td-animation-stack-type0-2 {
  margin-top: -122px;
}

How then, manage to move this icon of the avatar in question to the bottom of each post so that it looks like the second screenshot above ???

Thank you please help me.

CodePudding user response：

Try moving the td-module-meta-info div into td-module-thumb div.

CodePudding user response：

I suggest you to add your avatar pic as a child in you td-module-thumb class

and give your avatar(child) it position:absolute then apply

.td-module-thumb{
  position:absolute;
  bottom:0;
  left:50%;
  tranSform:translate(-50%);
}

img{
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  display: grid;
  place-content: center;
  
}

.td-module-thumb{
  background-color: bisque;
  width:250px;
  height: 400px;
  position: relative;
}

.td-module-thumb img{
  position: absolute;
  width: 75px;
  border-radius: 100%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

<div >
      <img src="https://source.unsplash.com/random/100x100" alt="Avatar" />
</div>