CODEWITHSUNDEEP
htmlcsscss-transforms
Rishabh
Rishabh

Reputation: 25

Rotated text on left border of responsive div

I am facing issue making text around the borders of a div, with dynamic content/images. Here is html code:

<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

css:

.fp-wrapper {
    position: relative;
    display: inline-block;
    margin: auto;
}
.fp-image {
    width: 80%;
    float:left;
    padding: 10px;
    border: 1px solid #53565a;
    z-index: 1;
}
.fp-title1, .fp-title2{
    padding: 0 10px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 30px;
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
}
.fp-title2 {
    bottom: 50%;
    top: unset !important;
    transform: translate(-50%,-50%) rotate(-90deg);
}

Fiddle: https://jsfiddle.net/wutzbvef/

Now the problem is that the content is dynamic, so min-height/max-height or negative margins won't work (I think so). Also I need to make it responsive, covering the border. Is this approach correct or need to make it by some other approach. Please help.

Edit: I may not explained better, but I basically want to vertical align top the -90deg rotated paragraph i.e. .fp-title2

Upvotes: 1

Views: 559

Answers (2)

Rmaxx
Rmaxx

Reputation: 1187

Try rotating first, then re-center the div. Otherwise it's ok.

    transform:  rotate(-90deg) translate(-50%, -50%);

You can also use a variable font-size for smaller images. (I would also use an :after class for this btw), use the a tag, like this:

.fp-wrapper {

}
.fp-wrapper a {
  width: 40%;
  display:inline-block;
  position: relative;
  z-index:1;
  float:left;
  padding: 10px;
  border: 1px solid #53565a;

}
.fp-image {
    width: 100%;
}

.fp-wrapper a:before{
    position: absolute;
    content:'text top';
    padding: 0 10px;
    background: #fff;
    display:inline-block;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
    z-index:20;
}
.fp-wrapper a:after {
  position:absolute;
  content:"left text";
  display:inline-block;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 10px;
  top:50%;  
  transform: translateX(-50%) rotate(-90deg);
  left:10px;
  z-index:10;
  background-color:#fff;
  
}
<div class="fp-wrapper">
        <a href="/url1">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>

<div class="fp-wrapper">
        <a href="/url1" style="width:30%;">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Use transform-origin

.fp-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 50px;
}

.fp-image { 
  width: 100%;
  padding: 10px;
  border: 1px solid #53565a;
  z-index: 1;
}

.fp-title1,
.fp-title2 {
  padding: 0 10px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 30px;
  color: #53565a;
  text-transform: uppercase;
  font-weight: 500;
}

.fp-title2 {
  transform: translate(-100%, 0%) rotate(-90deg);
  transform-origin: right center;
}

.w2 .fp-image {
  width: 80%;
}

.w3 .fp-image {
  width: 60%;
}
<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

<div class="fp-wrapper w2">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>


<div class="fp-wrapper w3">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

Upvotes: 1

Related Questions