I try to do something but it's not working at all.
That looks pretty simple, i desire to add a :before to an element with a background, but each time i do that, the ::before goes in front of the container.
.container{
position:relative;
z-index:1;
background:blue;
border:1 px solid white;
}
.container::before{
position:absolute;
content:"";
z-index:-1;
top:-10px;
left:-10px;
width:calc(100% + 20px);
height:calc(100% + 20px);
background:red;
}
Simply remove the z-index:1 property from the .container
body {
background-color: #eee;
}
.container{
position:relative;
background:blue;
border:1 px solid white;
width: 200px;
height: 200px;
}
.container::before{
position:absolute;
content:"";
z-index:-1;
top:-10px;
left:-10px;
width:calc(100% + 20px);
height:calc(100% + 20px);
background:red;
}
<body>
<div class="container"></div>
</body>
Related
I have a shape that looks like this
It is a rectangle with a circle behind it. I need to do a border all around it.
I tried to do a border for the rectangle and a curved line for the curved part (based on this). It doesn't seem to be precise enough. The curved line don't align 100% with the circle part. I need precision.
Putting the same shape a bit bigger behind it does not work for what I need.
Code - jsfiddle
.template {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rectangle {
background: red;
width: 91mm;
height: 63mm;
border-radius: 2mm;
}
.circle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: -999;
background: red;
width: 68mm;
height: 68mm;
border-radius: 100%;
}
<div class="template">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
Any ideas of how I could achieve that sweet border?
Use a pseudo element with radial-gradient:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;
}
<div class="box">
</div>
Then you can add border:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
<div class="box">
</div>
And also use a transparent color:
.box {
width:200px;
height:150px;
background:rgba(255,0,0,0.5) padding-box;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
border-top-color:transparent;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,rgba(255,0,0,0.5) 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
.box:after {
content:"";
position:absolute;
top:-3px;
height:100%;
left:-3px;
right:-3px;
border-top:3px solid blue;
border-right:3px solid transparent;
border-left:3px solid transparent;
border-radius:inherit;
clip-path:polygon(0 0,28px 0,28px 50px,calc(100% - 28px) 50px,calc(100% - 28px) 0, 100% 0,100% 100%,0 100%);
}
body {
background:url(https://picsum.photos/id/1001/800/800) center/cover;
}
<div class="box">
</div>
Good evening,
I am trying to make image hover overlay with text, but displayed text is always on the top of the image. I would like to display it in the middle of it.
I've tried padding etc, but it moved the overlay as well, that it covered also the free space below the image. Could you please help me, how to margin only text from top? Thank you!
EDIT: Or the best solution would be, if I could include another div with text only. Because I need to include text with html tags and it's not possible this way, via "content:"
http://jsfiddle.net/sL6bjebx/
Here is CSS code:
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
If your overlay text is going to be a one liner then you can use line-height css property to make it vertically center aligned
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
line-height:300px;
}
and if not, then I will suggest to use another way to display the content.
such as :before just like this fiddle, Or you can use a <p> tag as well instead of the :before tag check this fiddle.
.image:after {
content:'';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index:1
}
.image:before {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 20px;
top:0; left:0; right:0;
bottom:0;
opacity:0;
margin:auto;
z-index:2
}
.image:hover:after {
opacity:1;
}
.image:hover:before {
opacity:1;
}
Here is the solution with another div or something, where would be possible to insert text with HTML tags:
.image {
position:relative;
margin: 0 auto;
width: 317px;
height: 317px;
text-align: center;
}
.image img {
width:100%;
vertical-align:;
}
.image .overlayText {
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
margin:0;
}
.image:hover > .overlayText {
opacity:1;
}
<div class="image">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
<p class="overlayText"><b>Here</b> is some text</p>
</div>
You should simply add line-height
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div class="image" style="width: 317px; height: 317px; text-align: center;">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
</div>
I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
I don't know if it is tricky.
Here is a jsFiddle simple <div>hello</div>:
Is there any easy way to color the top left pixel of that div in red?
Thank you.
You can do this :
div:before{
position: absolute;
width:1px;height:1px;
background:red;
content:'';
}
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
Demonstration (with a bigger red dot, so that it's obvious)
For browser compatibility you could add a span inside your div:
<div><span></span>hello</div>
Then add styling:
div {
border:1px solid green;
height:200px;
background-color:yellow;
position:relative;
}
div span {
position:absolute;
height:1px;
width:1px;
background:red;
top:0;
left:0;
}
By this way :
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
div span {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: red;
}
http://jsfiddle.net/m3GMc/1/
Or via an image.
You should be able to use:
first-pixel-color-top-left-color: #f00;
Can you please take a look at JSfiddle and let me know how I can position the div with .caption at the bottom of the div with class .wrapper.
I already tried to add position:absolute; bottom:5px; rules to .caption but it positioned the caption div out of the .wrapper !
<div class="wrapper">
<div class="caption">Test</div>
<div class="main"></div>
</div>
here is the css rules
.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
}
The position: absolute should work but you'll need to set .wrapper as:
.wrapper {
position: relative;
}
Demo here: http://jsfiddle.net/sBxP2/4/
try this
http://jsfiddle.net/shall1987/MwJsG/
CSS
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position: relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
position: absolute;
bottom: 0;
}
you can update your css like this
http://jsfiddle.net/shall1987/MwJsG/
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position:relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;
margin-bottom:5px;
color:white;
position:absolute;
bottom:0;
}