Best way to lay text over an image halfway [closed]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Looking overlay an text over an image halfway. Best practice to achieve this?
Example Here
html css sass materialize
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
closed as too broad by Temani Afif, Suraj Rao, Mike M., sideshowbarker, Makyen Nov 29 '18 at 10:35
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
Looking overlay an text over an image halfway. Best practice to achieve this?
Example Here
html css sass materialize
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
closed as too broad by Temani Afif, Suraj Rao, Mike M., sideshowbarker, Makyen Nov 29 '18 at 10:35
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
Looking overlay an text over an image halfway. Best practice to achieve this?
Example Here
html css sass materialize
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
Looking overlay an text over an image halfway. Best practice to achieve this?
Example Here
html css sass materialize
html css sass materialize
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
asked Nov 29 '18 at 1:33
Brennan SchlooBrennan Schloo
32
32
closed as too broad by Temani Afif, Suraj Rao, Mike M., sideshowbarker, Makyen Nov 29 '18 at 10:35
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Temani Afif, Suraj Rao, Mike M., sideshowbarker, Makyen Nov 29 '18 at 10:35
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You can place your image absolutely at 60% of the left and and your text from 0% of the left to 80% (for example) with :
.image{
position:absolute;
left:60%;
...
}
.text{
width:80%;
...
}
Here is a working snippet:
.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
add a comment |
There are many ways for you to do this!
If it is a fixed (non-responsive) document and the image is a fixed background, you can use it in the main element:
.container{
padding-right: 50%;
}
And adjust the value of 50% to 100px or the drive you want
There is how to divide the elements into 2 divs, inside a main, and use the "Flex" property of the CSS in the parent of all.
You can use the "shape-outside" if there are two different elements, And you want the text of one go around the other.
But I could help you more if you provide the code you're using!
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
add a comment |
- Create a class like so and insert your image link inside:
- Create a class after your image:
- Insert css
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can place your image absolutely at 60% of the left and and your text from 0% of the left to 80% (for example) with :
.image{
position:absolute;
left:60%;
...
}
.text{
width:80%;
...
}
Here is a working snippet:
.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
add a comment |
You can place your image absolutely at 60% of the left and and your text from 0% of the left to 80% (for example) with :
.image{
position:absolute;
left:60%;
...
}
.text{
width:80%;
...
}
Here is a working snippet:
.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
add a comment |
You can place your image absolutely at 60% of the left and and your text from 0% of the left to 80% (for example) with :
.image{
position:absolute;
left:60%;
...
}
.text{
width:80%;
...
}
Here is a working snippet:
.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
You can place your image absolutely at 60% of the left and and your text from 0% of the left to 80% (for example) with :
.image{
position:absolute;
left:60%;
...
}
.text{
width:80%;
...
}
Here is a working snippet:
.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>.container{
position:relative;
width:100%;
height:200px;
}
.image{
position:absolute;
top:0;
left:60%;
width:40%;
height:100%;
}
.text{
width:80%;
position:absolute;
top:0;
left:0;
}<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Gatojpm.jpg/800px-Gatojpm.jpg" alt="Smiley face">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum convallis turpis vel tempor. Aliquam vitae ultricies magna. Fusce ex purus, venenatis eu lectus at, pretium semper lectus. Etiam posuere convallis enim, ut scelerisque mi tristique at. Vivamus condimentum, justo id fringilla luctus, massa ante varius leo, non consectetur lectus quam ut ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempor blandit libero. Mauris vulputate elit ante, at porta nisi interdum ac. Quisque fringilla ipsum id ex fermentum, id aliquam tellus imperdiet. Fusce feugiat, ex in elementum imperdiet, magna elit convallis magna, a rutrum neque dui id odio. Ut rutrum lectus nec sodales volutpat. Sed eleifend est velit, vitae consequat libero sollicitudin ut. Nulla ac convallis nisi.
</div>
</div>answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
answered Nov 29 '18 at 2:14
MaartiMaarti
1,8793923
1,8793923
add a comment |
add a comment |
There are many ways for you to do this!
If it is a fixed (non-responsive) document and the image is a fixed background, you can use it in the main element:
.container{
padding-right: 50%;
}
And adjust the value of 50% to 100px or the drive you want
There is how to divide the elements into 2 divs, inside a main, and use the "Flex" property of the CSS in the parent of all.
You can use the "shape-outside" if there are two different elements, And you want the text of one go around the other.
But I could help you more if you provide the code you're using!
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
add a comment |
There are many ways for you to do this!
If it is a fixed (non-responsive) document and the image is a fixed background, you can use it in the main element:
.container{
padding-right: 50%;
}
And adjust the value of 50% to 100px or the drive you want
There is how to divide the elements into 2 divs, inside a main, and use the "Flex" property of the CSS in the parent of all.
You can use the "shape-outside" if there are two different elements, And you want the text of one go around the other.
But I could help you more if you provide the code you're using!
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
add a comment |
There are many ways for you to do this!
If it is a fixed (non-responsive) document and the image is a fixed background, you can use it in the main element:
.container{
padding-right: 50%;
}
And adjust the value of 50% to 100px or the drive you want
There is how to divide the elements into 2 divs, inside a main, and use the "Flex" property of the CSS in the parent of all.
You can use the "shape-outside" if there are two different elements, And you want the text of one go around the other.
But I could help you more if you provide the code you're using!
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
There are many ways for you to do this!
If it is a fixed (non-responsive) document and the image is a fixed background, you can use it in the main element:
.container{
padding-right: 50%;
}
And adjust the value of 50% to 100px or the drive you want
There is how to divide the elements into 2 divs, inside a main, and use the "Flex" property of the CSS in the parent of all.
You can use the "shape-outside" if there are two different elements, And you want the text of one go around the other.
But I could help you more if you provide the code you're using!
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
answered Nov 29 '18 at 2:04
Kevyn Tuleu DouradoKevyn Tuleu Dourado
666
666
add a comment |
add a comment |
- Create a class like so and insert your image link inside:
- Create a class after your image:
- Insert css
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
add a comment |
- Create a class like so and insert your image link inside:
- Create a class after your image:
- Insert css
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
add a comment |
- Create a class like so and insert your image link inside:
- Create a class after your image:
- Insert css
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
- Create a class like so and insert your image link inside:
- Create a class after your image:
- Insert css
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>.imageContainer {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="imageContainer">
<img src="myImage.jpg" alt="myImage" style="width:100%;">
<div class="bottom-left">This text is in the bottom left</div>
<div class="top-left">This text is in the top left.</div>
<div class="top-right">This text is in the top right.</div>
<div class="bottom-right">This text is in the bottom right.</div>
<div class="centered">This text is centered.</div>
</div>answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
answered Nov 29 '18 at 2:09
MalmadorkMalmadork
187
187
add a comment |
add a comment |
