Imagem com textos over

textos sobre a imagem

by Rapha Souza

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.containercom {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-leftcom {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-leftcom {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-rightcom {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-rightcom {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centeredcom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="containercom">
  <img src="http://bancorbrastst.fluig.com/volume/stream/Rmx1aWc=/P3Q9MSZ2b2w9RGVmYXVsdCZpZD0xMzg2JnZlcj0xMDAwJmZpbGU9Y29tdW5pZGFkZS5qcGcmY3JjPTM1NTg3NjkxNzgmc2l6ZT0wLjMyNzYwOCZ1SWQ9MjAmZlNJZD0xJnVTSWQ9MSZkPWZhbHNlJnRrbj0mcHVibGljVXJsPXRydWU=.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-leftcom">Bottom Left</div>
  <div class="top-leftcom">Top Left</div>
  <div class="top-rightcom">Top Right</div>
  <div class="bottom-rightcom">Bottom Right</div>
  <div class="centeredcom">Centered</div>
</div>

</body>
</html>