Question posted in
The full documentation can be found here.

Divi theme – Center overlay middle div content over bottom of top div and top of bottom div stacked vertically

Let’s say I have 3 div elements, wrapped in an article element. It would look something like this:

<article>
    <div class="thumbnail-img">
        <img src="the_source.jpg">
    </div>
    <div class="avatar">
        <img src="the_avatar.jpg">
    </div>
    <div class="content">
        <p>This is some content!</p>
    </div>
</article>

Now, what I’d like to to is have that middle of class “avatar” to center vertically and horizontally between (overlap) the “thumb” and “content” divs.

It would look something like this:
Avatar centered between two div’s
enter image description here

As you can see, I’m working with WordPress. Specifically, creating a custom module for the Divi theme.

The CSS I have so far (which works pretty well, but is not 100% responsive – as in, the avatar does not always overlap centered between the 2 other div’s) is this:

.avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    padding: 5px;
    margin-top: -60%;
    z-index: 10;
}

Here is a Fiddle if it helps: poor attempt

Happy to provide more info if needed. I’m just sure how to “word” this for search engines or here in SO. Thanks! 🙂

Tags:

2

Answers


  1. 0

    you can try this:

    Here is the output

    .avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
    display:block;
    text-align:center;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    margin-top:-50px;
    z-index: 10;
    display:inline-block;
}
.thumbnail-img img{
    width:100%;
}
    <article class="article_wrap">
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>
    Login or Signup to reply.
  2. 0

    You could use the following style:

    img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.article_wrap {
  position: relative;
}
.avatar {
  position: absolute;
  width: 100%;
  height: 0;
  text-align: center;
}
.avatar img {
  border-radius: 50%;
  background-color: rgba(255,255,255,.2);
  padding: 5px;
  transform: translateY(-50%);
}
.content {
  padding: 50px;
}
    <article class="article_wrap">
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search