CODEWITHSUNDEEP
htmlcss
Milad
Milad

Reputation: 67

Both images are moving

I'm trying to put two images beside each other by 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>

and I want to move the one on the left on mouse hover (by transition in css), but the problem is when I try to do so, the image on the right hand will also move.

How can I make the right side image don't move when the other image is moving?

Upvotes: 4

Views: 86

Answers (3)

Yemachu
Yemachu

Reputation: 144

How about css transforms? Translations in particular. A css transform does not affect the reserved space in the layout, keeping all other objects where they belong. Be warned though, a transformed object does recieve pointer events on its visual location. Another point is that it can cause scrollbars to appear unless an element higher in the hierarchy has 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>

Upvotes: 2

Sanjeev
Sanjeev

Reputation: 11

Try using bootstrap div. Here's the code:

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

              insert image

Upvotes: 0

P.S.
P.S.

Reputation: 16384

Just add differend ids or classes to your span tags and write different animations. This should solve your problem.

Upvotes: 0

Related Questions