I can't get this text to position (and center) itself on top of this image overlay I made.
The code of the image and its overlay is:
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5)
}
<div id="post">
<div class="overlay">
Hello!
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
It keeps appearing like this:
An image of Childe from Genshin Impact with an overlay over him, and "Hello!" at the top of the image.
I want the text ("Hello!") to be ON TOP of the overlay, centered and not affected by the overlay. I'd also like to be able to put at least 2 lines of text. How can I do this?
Since you've already created a relative parent (the .overlay), we can wrap the text node, which is currently naked, with a simple span— basically, something which lets us target and position it.
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5)
}
.overlay .text {
position: absolute;
z-index: 5;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
}
<div id="post">
<div class="overlay">
<span class="text">Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
</div>
jsFiddle
HTML is
<div id="post">
<div class="overlay">
<span class="text">Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png"/>
</div>
CSS is
.overlay{
position: relative;
}
.overlay .text{
position: absolute;
left: 200px;
top: 120px;
}
See Position's Approach here
target your text with a span class and add a top element to that with the .overlay and .overlay::before
#post {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
padding: 9px;
}
#post img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
border: 2px solid #fafafa;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
z-index: 5;
display: block;
position: absolute;
height: 25%;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, 0.5)
}
.overlay span {
position: absolute;
z-index: 5;
bottom: 22px;
left: 50%;
top: 10%;
transform: translateX(-50%);
}
<div id="post">
<div class="overlay">
<span>Hello!</span>
<img src="https://cdn.discordapp.com/attachments/766845496593219594/874918388856684574/image0.png" />
</div>
</div>
Related
I am new to programming and I want to make a website where I want to put a text to the left bottom corner of an image. How to put it there and how to let it stay there when the screen is resized. And is my code ok ? or should I change something ?
JSFIDDLE
.flex{
position: relative;
display: flex;
justify-content: space-evenly;
}
.container-one a{
position: relative;
}
img{
display: block;
width: 100%;
height: 100%;
}
.box-one{
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
opacity: 0;
transition: 0.5s ease;
}
.container-one:hover .box-one {
opacity: 1;
}
span{
text-decoration: none;
color: red;
float:
}
<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
<span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</div>
</div>
you can do it with very simple css code.
Try this:
.box-one span {
position: absolute;
bottom: 0px;
}
You can add position: absolute with the bottom-left alignment to your .box-one span which is your text element
.box-one span {
position: absolute;
bottom: 0px;
left: 0px;
}
.flex {
position: relative;
display: flex;
justify-content: space-evenly;
}
.container-one a {
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
}
.box-one {
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
top: 0px;
opacity: 0;
transition: 0.5s ease;
}
.box-one span {
position: absolute;
bottom: 0px;
left: 0px;
}
.container-one:hover .box-one {
opacity: 1;
}
span {
text-decoration: none;
color: red;
}
<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
<span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</div>
</div>
I want to add blur behind text up to some amount of padding. I don't want some div behind and blur the div, I want it to be bound to the text.
Here is my attempt:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.image {
z-index: -1;
object-fit: cover;
}
.text {
z-index: 2;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
}
.text::before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
bottom: -5px;
left: -15px;
right: -15px;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<img class="image" src="https://source.unsplash.com/random" />
<h1 class="text">Example Text</h1>
</div>
I am getting like this:
I want the edges to be not blurred.
I want something like below:
You can consider overflow:hidden to stop the blur effect and have a sharpe edge. I also considered padding instead of adjusting top/left/right/bottom:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.text {
z-index: 1;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
padding: 12px 22px; /*added this*/
overflow: hidden; /*added this*/
}
.text::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<h1 class="text">Example Text</h1>
</div>
I have a cloud made with HTML/CSS and I'm trying to include some text in the center of it. But I'm having trouble positioning it and having it overlap over the cloud divs.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some text
</p>
</div>
<div id="left_c">
</div>
</div>
Not entirely sure how to make it work, I thought the z-index would allow the text to take "priority" and show first, but it doesn't seem to be working. Do I need to insert the p tags inside another div? Any suggestions would be appreciated!
Remove the text element from its current nesting level. Just make it a sibling of the border divs. Still one overall container.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
position: absolute;
top: 40px;
left: 135px;
z-index: 2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
<p class="text">this is some text</p>
</div>
If you change your html to:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
<p class="text">
this is some text
</p>
and the text element in css to:
.text {
overflow: hidden;
position: absolute;
z-index: 2;
top:200px;
right:200px;
}
then it works.
I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
z-index: 53;
top: 2%;
z-index: 2;
}
.box:after {
content: '';
//position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -3;
}
<div class="box-wrapper">
<div class="box"></div>
</div>
Remove the z-index of the box and add position:absolute for box:after
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
}
.box:before {
content: '';
position: absolute;
background-color: blue;
height: 50px;
width: 70px;
z-index:-2;
}
jsfiddle
The blue box is supposed to be behind the green box
Just remove all the irrelvant z-index values, then it works perfectly.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
color:white;
}
.box:after {
content: '';
position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -1;
}
<div class="box-wrapper">
<div class="box">I'm on top</div>
</div>
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/