Develop Reference

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
I was told to try "position relative" but nothing worked does anyone have any suggestions on how to do this?

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.stack.imgur.com/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>

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later

You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Running text marquee using jquery animate [duplicate]

I'm creating a marquee effect with CSS3 animation.
#caption {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
line-height: 30px;
height:30px;
width: 100%;
white-space: nowrap;
-moz-animation: caption 50s linear 0s infinite;
-webkit-animation: caption 50s linear 0s infinite;
}
#-moz-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
#-webkit-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
<div id="caption">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>
Now I can get the basic marquee effect, but the code is too specific for this demo.
Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
width: max-content;
padding-left: 100%;
/* show the marquee just outside the paragraph */
will-change: transform;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* Respect user preferences about animations */
#media (prefers-reduced-motion: reduce) {
.marquee span {
animation-iteration-count: 1;
animation-duration: 0.01;
/* instead of animation: none, so an animationend event is
* still available, if previously attached.
*/
width: auto;
padding-left: 0;
}
}
<p class="marquee">
<span>
When I had journeyed half of our life's way, I found myself
within a shadowed forest, for I had lost the path that
does not stray. – (Dante Alighieri, <i>Divine Comedy</i>.
1265-1321)
</span>
</p>
No hardcoded values — dependent on paragraph width — have been inserted.
The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.
If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)

Based on the previous reply, mainly #fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
No hardcoded value other than the scroll time, best suited for small scroll spaces
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
}
.marquee span {
display: flex;
flex-basis: 100%;
animation: marquee-reset;
animation-play-state: paused;
}
.marquee:hover> span {
animation: marquee 2s linear infinite;
animation-play-state: running;
}
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
50% {
transform: translate(-100%, 0);
}
50.001% {
transform: translate(100%, 0);
}
100% {
transform: translate(0%, 0);
}
}
#keyframes marquee-reset {
0% {
transform: translate(0%, 0);
}
}
<span class="marquee">
<span>This is the marquee text (hover the mouse here)</span>
</span>

The accepted answers animation does not work on Safari, I've updated it using translate instead of padding-left which makes for a smoother, bulletproof animation.
Also, the accepted answers demo fiddle has a lot of unnecessary styles.
So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo.
http://jsfiddle.net/e8ws12pt/
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 0;
height: 16px;
display: block;
}
.marquee span {
display: inline-block;
text-indent: 0;
overflow: hidden;
-webkit-transition: 15s;
transition: 15s;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}
<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>

The following should do what you want.
#keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}

Endless jQuery/CSS "ticker" slider that allows for variable width content

I'm hunting around for an endless jQuery "ticker"/slider that will work with images of various widths.
I've tried FlexSlider, and even spoken to the developers, but apparently it only works with items of a fixed width. This is a pretty common constraint, as the parent HTML element usually needs a predefined width.
I found a CSS only solution (http://jsfiddle.net/Hyg3C/4289/) but it's a bit of a hack because it only uses one very long background image (plus it jumps).
#images {
background: url(http://cl.ly/9BJG/collage.jpg);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 5s linear infinite;
-moz-animation: slideshow 5s linear infinite;
}
#-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
#moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
Is there a way to do this using lots of images of variable widths?

Zoom only a specific portion of an image in pure CSS

I have a div with a width of 800 and a height of 300 pixels.
I also have an .svg image that's set as the background-image of this div, and using css3 animations I make this image scroll left to right, indefinitely (it's a landscape) and wrapping.
I would like to put a circle in the middle of this div, and make the inside of this circle "zoom" the background. I'd love to have this pure CSS.
I've tried some masking and clipping, but nothing seemed to do the trick.
Is this possible with the current CSS specifications? A JavaScript solution would also be acceptable.
Here's an image showing what I mean:
If you look closely, you can see a circle in the middle, which should zoom the clouds behind it, as if looking through a magnifying glass.

Trying to get it reusing the same animation, without extra elements:
CSS
.test {
position: absolute;
width: 600px;
height: 400px;
left: 0px;
background-image: url(http://placekitten.com/1000/400);
background-size: 1000px;
-webkit-animation: base linear 20s infinite;
background-position-x: 0px;
background-position-y: 50%;
}
.test:after {
content: "";
position: absolute;
left: 200px;
width: 200px;
top: 100px;
height: 200px;
border-radius: 50%;
background: inherit;
-webkit-transform: scale(1.1);
-webkit-animation: inherit;
-webkit-animation-delay: -4s;
}
#-webkit-keyframes base {
0% { background-position-x: 0px; }
100% { background-position-x: -1000px; }
}
The trick is to set the animation in sync delaying it; just calculate the equivalence in time of the x offset.
fiddle

throw your zoom div into the pic div and give it a background image of a larger version of the same image.