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.
And this is what I would like to display after adding a foreground.
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.
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,