html, css

Greetings,

Congratulations on completing your second challenge!

transform: translate(-50%, -50%); means to move an element to the left by 50% of the current width of the element, and also up by 50% of the current height of the element.

This is typically paired with position: absolute; top: 50%; left:50%; to center the element horizontally and vertically. For example,

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You can read more about this under "Is the element of unknown width and height?" at centering css complete guide.

You can also try adding the position absolute and translate code snippet to your eye image and see it works :)

I would also suggest looking into using <button> or <a> for interactive elements as it would improve the accessibility of your solution.

I hope this was helpful for you, happy coding~