CODEWITHSUNDEEP
htmlcss
Vlad
Vlad

Reputation: 145

Rotated text over image with CSS

I am having issues with getting text to display over an image. There are four images total, and have them arranged in a cross like arrangement, and from the top each rotated 90 degrees from the previous image. What I am trying to do is have the text on top of the image. So far the text is on the left of the screen and not over an image.

This is the arrangement of the images. I would like to see if I can get the text over each image as well as rotate the text 90 degrees per image.

enter image description here

body {
  background-color:black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
}

h2 {
    color: white;
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

.square {
  /* background: black; */
  height: 100vh;
  width: 100vh;
  margin: auto;
}

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.square div,
.square img {
  float: left;
  width: 33.3333vh;
  height: 33.3333vh;
}
<div class="square">

  <div></div>
  <img src="http://dummyimage.com/520&text=6.gif" alt="test" height="520" width="520">
    <h2>Test Text</h2>
  <div></div>
  <img src="http://dummyimage.com/520&text=3.gif" alt="test" height="520" width="520" class="rotate270">
        <h2>Test Text</h2>
  <div></div>
  <img src="http://dummyimage.com/520&text=4.gif" alt="test" height="520" width="520" class="rotate90">
        <h2>Test Text</h2>
  <div></div>
  <img src="http://dummyimage.com/520&text=8.gif" alt="test" height="520" width="520" class="rotate180">
        <h2>Test Text</h2>
  <div></div>

</div>

Upvotes: 1

Views: 1635

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105893

You may use flex, wrap each text & image inside a figure tag and apply rotation :

.square {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 100vh;
  width: 100vh;
  margin: auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
figure {
  width: 33.3333vh;
  height: 33.3333vh;
  position: relative;
  margin: 0;
}
figure:first-child,
figure:last-child {
  margin: 0 33.33vh;
}
figure img {
  height: 100%;
  width: 100%;
}
h2 {
  color: green;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.rotate180 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.rotate90 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.rotate270 {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
<div class="square">

  <figure>
    <img src="http://dummyimage.com/520&text=6 " alt="test" height="520" width="520">
    <h2>Test Text</h2>
  </figure>
  <figure>
    <img src="http://dummyimage.com/520&text=3 " alt="test" height="520" width="520" class="rotate270">
    <h2>Test Text</h2>
  </figure>
  <figure>
    <img src="http://dummyimage.com/520&text=4" alt="test" height="520" width="520" class="rotate90">
    <h2>Test Text</h2>
  </figure>
  <figure>
    <img src="http://dummyimage.com/520&text=8" alt="test" height="520" width="520" class="rotate180">
    <h2>Test Text</h2>
  </figure>

</div>

Upvotes: 1

Gacci
Gacci

Reputation: 1398

You should have to put the contents in a wrapper. The following should do it to get you started!

body {
  background-color:black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
}

h2 {
    color: white;
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.wrapper{
    position: relative;
}
.square {
  /* background: black; */
  height: 100vh;
  width: 100vh;
  margin: auto;
}

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.square div,
.square img {
  float: left;
  width: 33.3333vh;
  height: 33.3333vh;
}
<div class="square">

  <div></div>
  <div class="wrapper">
  <img src="http://dummyimage.com/520&text=6.gif" alt="test" height="520" width="520">
    <h2>Test Text</h2>
  </div>
  <div></div>
  <div class="wrapper rotate270">
  <img src="http://dummyimage.com/520&text=3.gif" alt="test" height="520" width="520">
        <h2>Test Text</h2>
  </div>
  <div></div>
  <div class="wrapper rotate90">
  <img src="http://dummyimage.com/520&text=4.gif" alt="test" height="520" width="520">
        <h2>Test Text</h2>
   </div>
  <div></div>
  <div class="wrapper rotate180">
  <img src="http://dummyimage.com/520&text=8.gif" alt="test" height="520" width="520">
        <h2>Test Text</h2>
  </div>
  <div></div>

</div>

Upvotes: 1

Ray Koren
Ray Koren

Reputation: 864

I used Z index on the images and text and then added a rotate of 0 degrees on the top one to achieve this. I also put the text and image in the same div and gave that div the rotate class. here is a fiddle https://fiddle.jshell.net/z8p1zk6c/

<html>
<head>
<style>
body {
  background-color:black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
}

h2 {
    color: white;
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
   z-index: 10;
}
img {
  z-index: 1;
}
.square {
  /* background: black; */
  height: 100vh;
  width: 100vh;
  margin: auto;
}

.rotate0 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.square div,
.square img {
  float: left;
  width: 33.3333vh;
  height: 33.3333vh;
}
</style>   
</head>
 <div class="square">

      <div></div>
        <div class="rotate0">
      <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520">
        <h2>Test Text1</h2></div>
      <div></div>
      <div class="rotate270">
      <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate270">
            <h2>Test Text2</h2></div>
      <div></div>
      <div class="rotate90">
      <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate90">
            <h2>Test Text3</h2></div>
      <div></div>
       <div class="rotate180">
      <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate180">
           <h2>Test Text4</h2>       
           </div>
      <div></div>

    </div>
</html>

Upvotes: 1

Related Questions