CODEWITHSUNDEEP
htmlcss
DomeTune
DomeTune

Reputation: 1421

How to overlap image border with div border

i want to have two borders. The first one is the red-one of the image, which is rounded. The second is the blue-one of the div. Now i want that the red-one is over the blue-one so it look likes the blue-one has round curves at the start. But i only get the blue-one above the red-one. Can you help me with my struggle?

Question: How to get the red-border above the blue-border?

.imageWrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 60px;
}

.image {
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 50%;
    z-index: 1;
}

.info {
    position: relative;
    font-size: 80%;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 36px;
    line-height: 18px;
    padding: 5px 20px 5px 25px;
    border-color: blue;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    margin-left: -20px;
}

.maintext {
    width: 100px;
    font-weight: 700;
}

.subtext {
    width: 100px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="outer">
  <div class="imageWrapper">
    <img src="http://lorempixel.com/output/technics-q-g-100-100-9.jpg" class="image">
  </div><!-- remove the white space of inline-block
  --><div class="info">
    <div class="maintext ellipsis">Title here!</div>
    <div class="subtext ellipsis">Subtitle here!</div>
  </div>
 </div>

Upvotes: 0

Views: 1288

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

Assinging a non-static position will give an element z-index. Just leave the position on .imageWrapper, remove z-index from .image (unnecessary), and remove position: relative; from .info and that will give .imageWrapper a higher z-index so it will appear over .info

.imageWrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 60px;
}
.image {
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 50%;
}

.info {
    font-size: 80%;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 36px;
    line-height: 18px;
    padding: 5px 20px 5px 25px;
    border-color: blue;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    margin-left: -20px;
}

.maintext {
    width: 100px;
    font-weight: 700;
}

.subtext {
    width: 100px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="outer">
  <div class="imageWrapper">
    <img src="http://lorempixel.com/output/technics-q-g-100-100-9.jpg" class="image">
  </div><!-- remove the white space of inline-block
  --><div class="info">
    <div class="maintext ellipsis">Title here!</div>
    <div class="subtext ellipsis">Subtitle here!</div>
  </div>
 </div>

Upvotes: 3

Related Questions