CODEWITHSUNDEEP
javascripthtmlcss
vitaliy125
vitaliy125

Reputation: 3

need to overlay text on top of the image and make the text follow it , as the picture dynamic

The text that should be on the picture and follow it

<h1>Enter</h1>

the picture itself

enter image description here

I was told to try "position relative" but nothing worked does anyone have any suggestions on how to do this?

Upvotes: 0

Views: 154

Answers (1)

Oskar Grosser
Oskar Grosser

Reputation: 3454

Animations

Syncing to animated images

Quickly skimming through the spec I didn't find anything to whether animated images (e.g. animated GIFs) should be in sync with CSS. Therefore I presume that animated images may or may not be in sync, depending on the implementation.

Not only is this (presumably) not defined, images' actual presentation may be deferred. We can specify sync, async or auto (default) for attribute decoding, but that is just a hint which the browser may not honour.

This means while we can try to sync CSS with animated images, this may not actually work due to technical reasons.

Here is my approach to getting the CSS animation to sync with the animated image. Note that while it may look synchronous for the first 1 or 2 cycles, it quickly gets out of sync due to me being off by a tiny bit:

@keyframes gif-anim {
  0% {top: 40%}
  50% {top: 30%} 
}

.wrapper {position: relative}
.wrapper img {width: 100%}
.wrapper h1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: .715s normal .14s gif-anim infinite backwards steps(1);
}
<div class="wrapper">
  <img src=https://i.sstatic.net/I62VF.gif>
  <h1>Enter</h1>
</div>

Syncing with CSS Animations

If we had the individual images that make up the animated image, we could synchronize it with CSS @keyframes.

It is significantly easier to synchronize if the frames are evenly spaced across the animation cycle. Example:

@keyframes img-anim {
  0% {background-image: url(https://picsum.photos/id/1/300/200)}
  50% {background-image: url(https://picsum.photos/id/2/300/200)}
}
@keyframes text-anim {
  0% {left: 0%}
  50% {left: 50%}
}

.wrapper {
  position: relative;
  width: 300px;
  overflow: hidden;
}
.wrapper::before {
  content: "";
  width: 300px;
  height: 200px;
  display: block;
  background-image: url(https://picsum.photos/id/1/300/200);
  animation: img-anim 1s infinite steps(1);
}
.wrapper>h1 {
  position: relative;
  left: 0%;
  display: inline-block;
  animation: text-anim 1s infinite steps(1);
}
<div class="wrapper">
  <h1>Enter</h1>
</div>

Upvotes: 1

Related Questions