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; } 6 Answers
Answers 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.
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>Answers 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
Answers 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> Answers 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); } Answers 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>Answers 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%; } 
0 comments:
Post a Comment