How to add a negative margin equal with the half of the image's width in css?

Question

I am using an image with height: 100vh;, so based on the screen's resolution its size changes. I would like to add a negative left margin to it, equal with the half of its width (which depends on the screen resolution). Any solution to do this only with CSS?

Answer 1

If the negative left position is dependant on (half) the element width you can do like:

transform: translateX(-50%);

*{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">