CSS folded poster effect

css-folded-poster-effect.markdown

CSS folded poster effect

Add a containing div to turn an image into a folded poster.

A Pen by Joao Machete on CodePen.

License.

index.html

<div class="container">
  <img src="https://source.unsplash.com/collection/1065412/200x200">
  <div class="centered">Centered</div>
</div>

style.stylus

.container {
  position: relative;
  text-align: center;
  color: white;
}

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