Align vertical text next to the image

Question

I'm trying to create exactly like what is shown in the picture below. So far, it's not looking good for me.

Here's the JSFiddle: https://jsfiddle.net/6o3nz6g9/

HTML:

<h1>This is Sparta!</h1>
<div class="container">
<div class="row">
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
  <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
</div>
</div>

CSS:

.services__text {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -webkit-transform-origin: right top 0;
    transform-origin: right top 0;
    padding: 10px;
    float: left;
}

How do I do to get this desired effect? FYI: I'm working on Bootstrap framework.

Answer 1

You can change positioning of .services__text and then using translate align that before image .

 .services__text { position: absolute; left: 0; top: 0; transform: rotate(-90deg) translate(-40%, -200%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <h1>This is Sparta!</h1> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> </div> </div> 

Answer 2

Hey Champ, You may solve your problem with following CSS

 .services__text { position: absolute; text-align: right; -moz-transform: rotate(-90deg) translate(-100%, -100%); -webkit-transform: rotate(-90deg) translate(-100%, -100%); -o-transform: rotate(-90deg) translate(-100%, -100%); -ms-transform: rotate(-90deg) translate(-100%, -100%); transform: rotate(-90deg) translate(-100%, -100%); -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <h1>This is Sparta!</h1> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> </div> </div> 

Answer 3

Add following css properties in your code for class .service_text

top:20px;  left:-126px;  position:absolute;

And add a class to your class="col-xs-4" as class="col-xs-4 parent" And for parent add following css. position: relative; padding-left: 8px;

This will give exactly same result. And if you want further explanation i would love to help you on that

Answer 4

This method will work with any length of text (so long as it's a single line).

.services__text {
    position:absolute;
    transform: rotate(-90deg) translate(-100%);
    transform-origin: left top;
    width:100%;
    left:-8px;
    text-align:right;
}

• translate(-100%) moves the elements new position -100% of its width to its left (down).
• width:100%; gives your title room to expand. This the elements height .
• text-align:right; pushes the text to the top of the image
• position:absolute; & left:-8px; pushes the text to the outside of the image (possibly overlapping other elements)