Diagonal images on web page with text

Question

Here is the effect i have tried to achieve:

When the user moves their mouse over the image, a line of text should overlay the image in a diagonal fashion.

The images could be the background to the <p>. Really just need help first with making the full thing diagonal. Do not want to use hard coded dimensions/positions that would not work on screens of different width/height.

<div class="testrows">  
  <div class="drow"><p>Hello World</p></div>
  <div class="drow"><p>Hello World</p></div>
  <div class="drowhalf">
    <p>Hello World</p><p>Hello World</p>
  </div>
  <div class="drowhalf">
    <p>Hello World</p><p>Hello World</p>
  </div>
  <div class="drow"><p>Hello World</p></div>
  <div class="drow"><p>Hello World</p></div>
</div>

CSS

body {
  background: #e5e5e5;
  height:100%;
}

.testrows{
  display:block;
  height:100%;
}

.drow {
  width: 100%;
  height: 10%;
  background: black;
  position: absolute;
  top: -50px;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

.drow p {
  ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  padding-right: 60px;
  width: 100%;
  padding-bottom: 55px;
}

.drowhalf {
  width: 100%;
  height: 10%;
  background: black;
  position: absolute;
  top: -50px;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  color: #fff;
  vertical-align: middle;
}

.drowhalf p {
  ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  padding-right: 60px;
  width: 50%;
  padding-bottom: 55px;
}

https://jsfiddle.net/ufwmuuv4/

Answer 1

You can wrap all .drow elements by a wrapper (.inner-wrapper) and then rotate it (DRY), set transform-origin to top left to rotate from top left of element and finally give translateX(-50%) to .inner-wrapper to center it in its parent.

For stretching .drow, you can give width:200% to .inner-wrapper.

To calculate .drow's height, you have to use js.

Jsfiddle

function stretch(){
	var $wrapper = $('.wrapper'),
  		diagonal = Math.ceil(Math.sqrt(Math.pow($wrapper.width(),2) + Math.pow($wrapper.height(),2))),
      height = diagonal / $wrapper.find('.inner-wrapper .drow').length;        
      $wrapper.find('.inner-wrapper .drow').height(height).css('line-height', height + 'px'); 
}

$(document).ready(function(){
	stretch();
});


$( window ).resize(function(){
	stretch();
});

 html,
 body {
   margin: 0;
   padding: 0;
 }
 
 html,
 body,
 .wrapper,
 .inner-wrapper {
   height: 100%;
 }
 
 body {
   background: #e5e5e5;
 }
 
 p {
   margin: 0;
 }
 
 .wrapper {
   overflow: hidden;
 }
 
 .inner-wrapper {
   transform: rotate(-45deg) translateX(-50%);
   transform-origin: top left;
   text-align: center;
   width: 200%;
 }
 
 .drow {
   height: 100px;
   line-height: 100px;
   color: #fff;
   background: rgba(0, 0, 0, 1);
 }
 
 .drowhalf p {
   display: inline-block;
   width: 50%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inner-wrapper">
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
  </div>
</div>