How To Add A Negative Margin Equal With The Half Of The Image's Width In Css?

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 (w

Solution 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%);
}

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