1

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>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Vlad
  • 145
  • 6
  • 19
  • 2
    wrap the images in divs, set those divs to position:relative, the text on top of the images should then be position absolute. – Rooster Jan 24 '17 at 21:47
  • @Rosster can you please give me an example? – Vlad Jan 24 '17 at 21:50
  • You need to set the z-index of the text(or of the elements containing the text) higher than the images. – APAD1 Jan 24 '17 at 21:52
  • @APAD1, I have no clue what that means or how to do it – Vlad Jan 24 '17 at 21:53
  • [CSS z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) – APAD1 Jan 24 '17 at 21:57
  • @APAD1 One thing I was mistaken, I never got the text to rotate or overlap on the image, what I thought was the text was just the alt tag of the image – Vlad Jan 24 '17 at 21:58
  • For the positioning, there's http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css. I was actually going to close this as a duplicate until I saw the bit about rotating the text too; that's an important difference, so I put it in your title. – Heretic Monkey Jan 24 '17 at 22:07

3 Answers3

1

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>
Ray Koren
  • 814
  • 14
  • 25
1

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>
Gacci
  • 1,388
  • 1
  • 11
  • 23
  • Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Jan 24 '17 at 22:07
  • I don't believe it needs further explanation. The class it is called a wrapper and I stated that it needs a wrapper. What would you like me to explain? – Gacci Jan 24 '17 at 22:20
1

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129