phantom phantom - 5 months ago 12
CSS Question

vertical text always remain same distance from side of image

I have an image with some vertical text giving credit on the photo. I want to ensure that the text always stays outside the image when it becomes responsive. I am trying to put the text just outside the image, and at the bottom right of the image.

Here is a jsfiddle showing what happens

Also, here is the html

<div class="section">
<div class="vertical-text">Photo Credit</div>
<img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>


and css

section {
max-width: 300px;
margin: 0 auto;
}

img {
width: 95%;
}

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top 0;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top 0;
float: right;
}

Answer

Here you go, I think this is close.

.section {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  background: pink;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
}

.vertical-text {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 50%) rotate(90deg);
  transform-origin: top left;
  z-index: 22;

}
<div class="section">
  
  <div class="img-wrap">
<div class="vertical-text">Photo Credit</div>
    <img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
  </div>
</div>

JSfiddle Demo

Comments