Animate image left-to-right, to show another image

I have tried to search the web for a solution on how to do this, without any luck.

What I want to achieve, is displaying one image, at the very center of the webpage.

<img src="image1.png">


Then on top of that image, I will have an identical image, just in another color.

<img src="image2.png">


At the moment, the webpage is only displaying one of the images, since they are on top of each other, and have same shape, just a different color.

The effect that I am looking for, is to change the image, infinitely, from left to right. Without the images moving at all, they should stay all centered.

Is that even possible?

Similar example, just without hovering - it should be infinitely and left to right:
http://jsfiddle.net/75Umu/3/

2 Answers
2

You can achieve it with small change in your CSS and the image you are going to use.

You will need both image as one image side by side. I am using below image for background.

I have added below changes in CSS.

.skillsDouble li
...
...
...
background-image: url("https://i.stack.imgur.com/6png9.png");
background-position:0 0;
...
...


.skillsDouble li:hover
background-position:100% 0;



ul
list-style-type:none;

ul li a
text-decoration:none;

.skillsDouble
float: left;

.skillsDouble li
width:100px;
height:50px;
text-align:center;
line-height:50px;
float:left;
/* Old browsers */
background-image: url("https://i.stack.imgur.com/6png9.png");
background-position:0 0;
margin-left:10px;
transition:all 2s ease;

.skillsDouble li:hover
background-position:100% 0;

.skillsDouble li a
color:white;


<div class="skillsDouble">
<ul>
<li><a href="#">Automation</a>
</li>
<li><a href="#">TDD</a>
</li>
</ul>
</div>
<!--End skills double-->

http://jsfiddle.net/nimittshah/3ct0spmr/

Maybe this will put you on the right track. All you need to do now is change those images and play with margin, width & height on .wrap and width & height on .image-1, .image-2.

html,
body position: relative; margin: 0; padding: 0; height: 100%;

.wrap position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px;
.image-1,
.image-2 overflow: hidden; position: absolute; top: 0; left: 0; width: 200px; height: 200px;
.image-2 animation: my-animation 2s alternate infinite;
.image-1 img,
.image-2 img display: block;

@keyframes my-animation
0% width: 0%;
100% width: 100%;


<div class="wrap">
<div class="image-1"><img src="https://www.mirous.eu/stack-overflow/img/flake-black.png" /></div>
<div class="image-2"><img src="https://www.mirous.eu/stack-overflow/img/flake-blue.png" /></div>
</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy