Image rotation: CSS

Question

This question has been asked, and I've been trying to get it to work with my code for a few hours, but cannot seem to. In brief, I can make my way around CSS/HTML, but designed the website in Webflow then extracted HTML, so I'm clearly missing something.

Here's the codepen (you can see the rotated image, but the overlapping) http://codepen.io/jiselllla/pen/yMYwOr

I'm trying to rotate an image 90 degrees clockwise. It shows up rotated in the file folder, and when I view it, but the original image must be saved in a non-rotated (landscape) orientation for it to appear like this.

I've tried to mimic the picture codes for landscape photos, but just add rotation to it. It rotates, but the positioning of blocking doesn't happen. Is it more efficient to manipulate the img class? Thanks...

.w-richtext figure.w-richtext-figure-type-image-rotate,
.w-richtext figure[data-rt-type="image"] {
  display: table;
  transform: rotate(90deg);
}
.w-richtext figure.w-richtext-figure-type-image-rotate > div,
.w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.w-richtext figure.w-richtext-figure-type-image-rotate > figcaption,
.w-richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image-  rotate > div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

Answer 1

CSS rotating rolls the item around the screen depending on the degrees you rotate by. So you need to increase its margins, try the below in your CSS for the image.

position: static;

margin-top: 84px;