1

I would like to display partial image on top of a web page the bottom 40%. The image is in a rotating container with the rotation keyword. I got the image to rotate, but it I cannot get it to be partially displayed.

I sought out various solutions from adding a clip-path (or clip). I thought adding id="clip" to the would work. Also played with object-fit. I also played around with image sizes and various containers in css. I couldn't get any of them to work. To get an idea of what I'm trying to do, I've attached images of the desired result.

Here is the part of the image to be displayed.

This is the part of the image to be displayed

And this is what I would like to display after adding a foreground.

enter image description here

The background canopy of stars should slowly rotate. Finally, this is the whole of the background image. Rectangle which is to be visible is marked off.

This image will rotate clockwise

Below are my css and html files. Everything unneeded has been removed for clarity.

rotate.css.

.rotating-container {
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 500px;
  width: max-width;
}
  
.rotate {
  animation: rotation 200s infinite linear ;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#clip {
  position: absolute;
  clip-path: inset(0px 500px 500px 0px);
}

.foreground-container {
  position: absolute;
  left: 0;
  top: 70%;
  width: 100%;
}

.bottom-align {
  display: inline-block;
  position: absolute;
  width: 100%;
  right:0;
}

rotate.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./rotate.css">
</head>
<body>
    <div class="rotating-container"; width: max-width;>
        <img
            src = "./dome.png"
            class="rotate"
            style="width: 100%; object-fit: cover;"
        >

        <div class="foreground-container">
        <!-- adding id="clip" to the below <img> does not work -->
            <img
                style="height: 100%; width: 100%; object-fit: contain; align-content: bottom;"
                src="./foreground.png"
            >
        </div>
    </div>
</body>
</html>

Thank you for any suggestions or advice,

0

1 Answer 1

1

You can simplify your code a bit:

HTML

<div id="container">
  <img id="rotating" src="./dome.png">
  <img id="foreground" src="./foreground.png">
</div>

(The urls link to your posted image of the dome and a version of your foreground where I quickly deleted the background.)

CSS

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#container {
  position: relative;
  width: 326px;
  height: 162px;
  overflow: hidden;
}

#rotating {
  position: absolute;
  left: -87px;
  bottom: -42px;
  animation: rotation 200s infinite linear;
}

#foreground {
  position: absolute;
}

Here's a working JSFiddle.

Simply make a container <div> that has the same size as the wanted crop, let overflow be hidden and position be relative.

Place both the rotating image and the foreground inside the container. Let them both have position: absolute.

Use bottom and left to move the rotating image into the right starting position.

3
  • While this kind of works, I'd definitely suggest also: 1) using top and left values that allow for images of different sizes to be used, 2) rotate(360deg) so the rotation fully completes, 3) classes instead of IDs so this effect could be more easily reused in the future, 4) (optional) set the container size based on the content width instead of explicitly set, 5) using <figure> as the container element instead of <div>, 6) adding role="img" with an aria-label on the container Mar 19 at 23:30
  • Good points @ZachSaucier. Not a web developer. Just wanted to show the principle in a simple way. Ad 1 and 4) OP seems to need a very specific crop, could be set in percentages to allow different sizes though. Ad 3) Yes! Ad 5) Is it good practice to have two imgs inside a figure?
    – Wolff
    Mar 19 at 23:40
  • 1
    Yeah it's fine to have multiple images inside of a figure so long as they're related and you're describing what the figure is showing for screen readers and such Mar 20 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.