Both images are moving.

Question

I am trying to put two images next to each other using

span.img {
  position: absolute;
  margin-left: 100px;
  transition: margin 0.5s;
  height: 150px;
  width: 150px;
}
span.img:hover {
  margin-left: 0px;
}
span.image {
  margin-left: 350px;
  transition: margin 0.5s;
  height: 150px;
  width: 150px;
}
span.image:hover {
  margin-left: 450px;
}

<span>
  <img src="http://placehold.it/200/FF6347/FFF" />
</span>
<span>
  <img src="http://placehold.it/200/47E3FF/000" />
</span>

Run codeHide result

and I want to move it to the left on hover (by going to css), but the problem is when I try to do this, the image on the right side will also move.

How can I make the image of the right side not move when another image is moving?

Answer 1

css-? . css , , . , . , , , , overflow: hidden.

span.image {
  /* Inline block causes width and height to affect the span element. */
  display:inline-block;
  height: 150px;
  width: 150px;
}
span.image img{
  transition:transform 0.2s ease-in-out;
  transform: translate(0,0);
  /* Hovering over the image causes the transition to take effect.*/
  /* This can cause weird bouncing effects. As such ignore pointer events.*/
  pointer-events:none !important;
  
}
span.image:hover img {
  transform: translate(350px, 0);
}

<span class="image">
  <img src="http://placehold.it/200/FF6347/FFF" />
</span>
<span class="image">
  <img src="http://placehold.it/200/47E3FF/000" />
</span>

Hide result

Answer 2

differend id class es span . .

Answer 3

bootstrap div. :

<div class = "container">
    < div class = "row">
       <div class = "col-md-6"> //you can use anyone here

              insert image