Diagonal images on web page with text - css

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>

Answer 2

$("div").hover(function () {
$('p').css('display', 'block');
}, function () {
$('p').css('display', 'none');
});
div {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
margin: 100px;
height: 150px;
width: 350px;
background-image: url('http://placehold.it/350x150');
}
p {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
<p>Hello World</p>
</div>
You can do a rotation with transform:rotate
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
W3C as reference https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotate
Try to create a div and set your image as a background-img, then rotate this div.
Inside this div, put your text in a p and use jQuery to displayed it on hover.
See this on Codepen http://codepen.io/Qasph/pen/PmoNVz

Answer 3

Wouldn't it be better to use rotate?
I think this may be your answer:
CSS:
body {
background: #e5e5e5;
}
.aviso {
width: 50px;
height: 200px;
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;
}
.aviso p {
ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
padding-right: 60px;
width: 100%;
padding-bottom: 55px;
}
HTML:
<div class="aviso">
<p>WIP</p>
</div>
http://codepen.io/AyrtonAlves/pen/NxMBxO

Answer 4

Use rotate instead of skew.
.div {
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Answer 5

You can achieve this effect with pure css..
div {
margin: 100px;
height: 150px;
width: 350px;
background-image: url('http://placehold.it/350x150');
}
div:hover p{
display:block;
}
p {
display:none;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
<p>Hello World</p>
</div>

Answer 6

Ok so it was only possible to do with Javascript and jquery. There was no CSS way to do it.
js
<script type="text/javascript">
$(window).on('resize', function (){
updateWidth();
});
function toRadians (angle) {
return angle * (Math.PI / 180);
}
function updateWidth(){
//add this to the width to make sure it fits
var idealRatio = 45.0/114;
idealHeight = 134.0;
var safetyAdd = 10;
//var topMargin = .;
var divHeightPercent = 1/6.4;
//first get the new content container height and width
var contentHeight = $('#content').height();
console.log('height:' + contentHeight);
var contentWidth = $('#content').width();
console.log('width:' + contentWidth);
//scale the hieght in proportion to the diagonal
/*
var proportion = Math.sqrt(contentHeight*contentHeight+ contentWidth*contentWidth)/(contentHeight/Math.cos(toRadians(20)));
console.log('proportion:' + proportion);
var theta = Math.atan(contentWidth/contentHeight);
var degree = 180*theta/Math.PI;
console.log('degree:' + degree);*/
//calculate the correction factor for height
var correctionFactor= (contentHeight*1.0/Math.cos(toRadians(20)))/contentHeight;
correctionFactor= (idealRatio/(contentHeight/contentWidth));
correctionFactor= 1+correctionFactor;
console.log('correctionFactor:' + correctionFactor);
divHeightPercent = divHeightPercent*correctionFactor;
console.log('divHeightPercent:' + divHeightPercent);
//topMargin=topMargin*correctionFactor;
//console.log('topMargin:' + topMargin);
//calculate the height of each section
var commonDivHeight = contentHeight*divHeightPercent;
console.log('divHeight:' + commonDivHeight);
$("#drow0").height(commonDivHeight);
$("#drow1").height(commonDivHeight);
$("#drow2").height(commonDivHeight);
$("#drow3").height(commonDivHeight);
$("#drow4").height(commonDivHeight);
$("#drow5").height(commonDivHeight);
//correctio for common div height
var cdhCorr = Math.tan(toRadians(20))*commonDivHeight;
cdhCorr = Math.sin(toRadians(20))*cdhCorr;
console.log('cdhCorr:' + cdhCorr);
var diagonalHeight = commonDivHeight/Math.cos(toRadians(20));
console.log('diagonalHeight:' + diagonalHeight);
//calculate the bottom for the first div and proper width
var zeroRowBotPoint = diagonalHeight;
console.log('zeroRowBotPoint:' + zeroRowBotPoint);
//var zeroRowWidth = zeroRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
//console.log('zeroRowWidth:' + firstRowWidth);
var zeroRowWidth = calcMaxWidthNeeded(zeroRowBotPoint, contentWidth, commonDivHeight);
$("#drow0").width(zeroRowWidth);
$("#drow0").css({top: 0});
//calculate the bottom for the first div and proper width
var firstRowBotPoint = diagonalHeight+zeroRowBotPoint;
console.log('firstRowBotPoint:' + firstRowBotPoint);
//var firstRowWidth = firstRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
//console.log('firstRowWidth:' + firstRowWidth);
var firstRowWidth = calcMaxWidthNeeded(firstRowBotPoint, contentWidth, commonDivHeight);
$("#drow1").width(firstRowWidth);
var row1padding = getLeftPadding(contentHeight, firstRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow1").css({top: zeroRowBotPoint, paddingLeft: row1padding, marginRight:700});
//calculate the bottom for the second div and proper width
var secondRowBotPoint = diagonalHeight+firstRowBotPoint;
console.log('secondRowBotPoint:' + secondRowBotPoint);
//var secondRowWidth = secondRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
//console.log('secondRowWidth:' + secondRowWidth);
var secondRowWidth = calcMaxWidthNeeded(secondRowBotPoint, contentWidth, commonDivHeight);
$("#drow2").width(secondRowWidth);
var row2padding = getLeftPadding(contentHeight, secondRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow2").css({top: firstRowBotPoint, paddingLeft: row2padding});
//calculate the bottom for the third div and proper width
var thirdRowBotPoint = diagonalHeight+secondRowBotPoint;
console.log('thirdRowBotPoint:' + thirdRowBotPoint);
//var thirdRowWidth = thirdRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
//console.log('thirdRowWidth:' + thirdRowWidth);
var thirdRowWidth = calcMaxWidthNeeded(thirdRowBotPoint, contentWidth, commonDivHeight);
$("#drow3").width(thirdRowWidth);
var row3padding = getLeftPadding(contentHeight, thirdRowBotPoint, diagonalHeight, commonDivHeight);
$("#drow3").css({top: secondRowBotPoint, paddingLeft: row3padding});
//calculate the bottom for the forth div and proper width
var forthRowBotPoint = diagonalHeight+thirdRowBotPoint;
console.log('forthRowBotPoint:' + forthRowBotPoint);
//var forthRowWidth = forthRowBotPoint/Math.sin(toRadians(20));//apply some correction faction here
//console.log('forthRowWidth:' + forthRowWidth);
var row4padding = getLeftPadding(contentHeight, forthRowBotPoint, diagonalHeight, commonDivHeight);
var forthRowWidth = calcMaxWidthNeeded(forthRowBotPoint, contentWidth, commonDivHeight)- row4padding;
$("#drow4").width(forthRowWidth);
var topCorrection4 = row4padding*Math.tan(toRadians(20));
console.log('topCorrection4:' + topCorrection4);
$("#drow4").css({top: thirdRowBotPoint-topCorrection4, left: row4padding});
//calculate the bottom for the fith div and proper width
var fifthRowBotPoint = diagonalHeight+forthRowBotPoint;
console.log('fifthRowBotPoint:' + fifthRowBotPoint);
//var fifthRowWidth = fifthRowBotPoint/Math.sin(toRadians(20)) - row5padding;//apply some correction faction here
//console.log('fifthRowWidth:' + fifthRowWidth);
var row5padding = getLeftPadding(contentHeight, fifthRowBotPoint, diagonalHeight, commonDivHeight);
var fifthRowWidth = calcMaxWidthNeeded(fifthRowBotPoint, contentWidth, commonDivHeight)- row5padding;
var topCorrection5 = row5padding*Math.tan(toRadians(20));
$("#drow5").width(fifthRowWidth);
$("#drow5").css({top: forthRowBotPoint-topCorrection5, left: row5padding});
/*correct the padding
//var y = contentHeight;
var row0padding = 0; //its not possible
var row1padding = getLeftPadding(contentHeight, firstRowBotPoint, diagonalHeight, commonDivHeight);
var row2padding = getLeftPadding(contentHeight, secondRowBotPoint, diagonalHeight, commonDivHeight);
var row3padding = getLeftPadding(contentHeight, thirdRowBotPoint, diagonalHeight, commonDivHeight);
var row4padding = getLeftPadding(contentHeight, forthRowBotPoint, diagonalHeight, commonDivHeight);
var row5padding = getLeftPadding(contentHeight, fifthRowBotPoint, diagonalHeight, commonDivHeight);
//*/
//get font height
var topPadding = (commonDivHeight-32)/2;
$("#rowp1").css({marginTop: topPadding, marginLeft:-250});
$("#rowp2").css({marginTop: topPadding});
$("#rowp3").css({marginTop: topPadding});
$("#rowp4").css({marginTop: topPadding});
$("#rowp5").css({marginTop: topPadding});
$("#rowp6").css({marginTop: topPadding, marginLeft:250});
//finall unhide the contents
$("#content").css({opacity:1});
}
function calcMaxWidthNeeded (bottomLoc, contentWidth, height){
//first find the width of the triangle formed by the section
var xDistance = bottomLoc/Math.tan(toRadians(20));
if(xDistance <= contentWidth){
//the width calculated by the simple function will be most efficient
console.log('Using simple Width Calculation');
return bottomLoc/Math.sin(toRadians(20));
}
var x = xDistance - contentWidth;
var bigHyp = xDistance/Math.cos(toRadians(20));
var ratio = x/xDistance;
var smallHyp = bigHyp*ratio;
//get the extra width due to the 20 degree rotaion
var extraWidth = height*Math.tan(toRadians(20));
var efficientWidth = bigHyp-smallHyp+extraWidth;
console.log('efficientWidth:' + efficientWidth);
return efficientWidth;
}
function getLeftPadding(contentHeight, bottomLoc, diagonalHeight, height){
var y = bottomLoc - contentHeight;
var x = y-diagonalHeight;
//return if there is no need to change the padding
if(x<=0){
console.log('Left padding change not required');
return 0;
}
var bottHyp = y/Math.sin(toRadians(20));
var xtoyRatio = x/y;
var topHyp = bottHyp*xtoyRatio;
//get the extra width due to the 20 degree rotaion
var extraWidth = height*Math.tan(toRadians(20));
console.log('extraWidth:' + extraWidth);
//finally calculate the padding
var paddingVal = topHyp ;
console.log('paddingVal:' + paddingVal);
return paddingVal;
}
function myFunction() {
document.querySelector('#selected').style.color='#008ed2';
updateWidth();
}
</script>
HTML
<div class="content" id="content">
<!--div class="inner-wrapper"-->
<div class="drow0" id="drow0"></div>
<div class="drow1" id="drow1"><p id="rowp1">DEVICES, IN A REALLY HUMAN WAY.</p></div>
<div class="drow2" id="drow2">
<div class="drow2-1" id="drow2-1"><p id="rowp2">EAT, DRINK AND BE MARY.</p></div>
<div class="drow2-2"><p id="rowp3">BE CAUSE.</p></div>
</div>
<div class="drow3" id="drow3">
<div class="drow3-1"><p id="rowp4">HEY, NICE PACKAGE.</p></div>
<div class="drow3-2"><p id="rowp5">WAIT FOR APPLAUSE.</p></div>
</div>
<div class="drow4" id="drow4"><p id="rowp6">WE FEEL BETTER ALREADY.</p></div>
<div class="drow5" id="drow5"></div>
<!--/div-->
</div>
CSS
.p, .drow1, .drow2, .drow3,.drow4{
margin: 0;
}
.content {
overflow: show;
position:relative;
text-align: center;
background-color: black;
color: white;
font-family: 'futura-pt-bold', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 2em;
text-shadow:0px 0px 16px black;
opacity: 0;
}
.drow0, .drow1, .drow2, .drow3, .drow4, .drow5{
position:absolute;
transform: rotate(-20deg);
transform-origin: bottom left;
height:16.66%;
left:0%;
width: 100%;
background-repeat:no-repeat;
background-size:cover;
}
.drow0{
top:0%;
background-image: url("../desktop_images/1.jpg");
}
.drow1{
top:16.66%;
background-image: url("../desktop_images/2.jpg");
}
.drow2{
display: inline-flex;
top:33.33%;
}
.drow2-1{
width: 60%;
background-image: url("../desktop_images/3.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow2-2{
width: 40%;
background-image: url("../desktop_images/4.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow3{
display: inline-flex;
top:50%;
}
.drow3-1{
width: 45%;
background-image: url("../desktop_images/5.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow3-2{
width: 55%;
background-image: url("../desktop_images/6.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.drow4{
background-image: url("../desktop_images/7.jpg");
top:66.66%;
}
.drow5{
background-image: url("../desktop_images/8.jpg");
top:83.33%;
}
.drow1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-2.png");
background-size: auto 65%;
}
.drow2-1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-3.png");
background-size: 52% auto;
}
.drow2-2:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-4.png");
background-size: 75% auto;
}
.drow3-1:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-5.png");
background-size: auto 65%;
}
.drow3-2:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-6.png");
background-size: auto 65%;
}
.drow4:hover {
background-repeat: no-repeat;
background-position: center;
color: transparent;
text-shadow:0px 0px 0px transparent;
background-image: url("../desktop_images/bg-7.png");
background-size: auto 65%;
}