samedi 25 juin 2016
Positioning text over a div
I am trying to position text in different places (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right) over a responsive div/image. The width is responsive.
Here is a fiddle example: https://jsfiddle.net/Fawn721/os01fnmt/
.img-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper .overlay-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center
}
.img-wrapper .overlay-text p {
position: absolute
}
.img-wrapper .overlay-text p.center {
top: calc(50% - 1rem);
left: 0;
width: 100%;
color: #000
}
.img-wrapper .overlay-text p.top-left {
top: 0;
left: 0
}
.img-wrapper .overlay-text p.top-center {
top: 0;
right: 0;
left: 0
}
.img-wrapper .overlay-text p.top-right {
top: 0;
right: 0
}
.img-wrapper .overlay-text p.bottom-left {
bottom: 0;
left: 0
}
.img-wrapper .overlay-text p.bottom-center {
bottom: 0;
left: 0;
right: 0
}
.img-wrapper .overlay-text p.bottom-right {
bottom: 0;
right: 0
}
<div class="img-wrapper">
<img class="lazyload" data-sizes="auto" alt="Mobile is the default image"
src="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150"
data-src="https://placeholdit.imgix.net/~text?txtsize=33&txt=414%C3%97150&w=414&h=150">
<div class="overlay-text">
<p class="top-left"><p class="top-left">Top Left</p></p>
<p class="top-center"><p class="top-center">Top Center</p></p>
<p class="top-right"><p class="top-right">Top Right</p></p>
<p class="bottom-left"><p class="bottom-left">Bottom Left</p></p>
<p class="bottom-center"><p class="bottom-center">Bottom Center</p></p>
<p class="bottom-right"><p class="bottom-right">Bottom Right</p></p>
</div>
</div>
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire