How do I add negative margin equal to half the width of an image in css?

Question

How do I add negative margin equal to half the width of an image in css?

I am using an image from height: 100vh;

, so it resizes based on the screen resolution. I would like to add a negative left margin to it equal to half its width (which depends on the screen resolution). Any solution to do this with CSS only?

+3

html css

Stefan May 26 '17 at 17:05

source to share

1 answer

Roko C. Buljan · Accepted Answer · 2017-05-26T17:08:19+0000

If the negative left position depends on (half) the width of the element, you can do this:

transform: translateX(-50%);

quick demo:

*{margin:0;}

img {
  vertical-align: top;
  height: 100vh;
  transform: translateX(-50%);
}

<img src="//placehold.it/800x600/0bf">

Run code

and hover animation

*{margin:0;}

.halfThere {
  vertical-align: top;
  height: 100vh;
  transition: 0.4s;
  transform: translateX(-50%);
}
.halfThere:hover {
  transform: translateX(0%);
}

<img class="halfThere" src="//placehold.it/800x600/0bf">

Run code

How do I add negative margin equal to half the width of an image in css?

More articles: