I have a div tag. I want to remove the children's inheritance of #overlay's opacity
Here is my code:
<body id="bg">
<div id="overlay">
<header id="colortext">dgjdhgjdhd</header>
</div>
</body>
And this my css code.
#bg{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(../Images/bg.jpg);
}
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #000;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#colortext{
background-image:none;
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
opacity:1 !important;
}
I want to have like this site background: http://www.ehsanakbari.ir/
How can I do this?
You cannot stop children elements from inheriting their parent's opacity.
Instead, you could use an rgba value for the parent's background color instead of opacity:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0,0,0,0.5);
}
See this SO question for more info.
Related
This is the current code I made, the rotations and animations are okay, but I can't make a hover text in the image of the planet or the orbit of the planet.
<html>
<head>
<style>
body {
background-image: url(bg.jpg);
background-size: cover;
}
I can't make a hover with this while the planets were animating.
.sun {
left:700px;
top:300px;
height: 170px;
width: 170px;
background-image: url("sun.png");
background-repeat: cover;
background-size: 100%;
position: absolute;
margin: 0;
}
the planet or the orbit of the planet when you hover it, it should show the text or the name of the planet itself.
.mercury {
left:680px;
top:343px;
height: 40px;
width: 40px;
background-image: url("mercury.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 280% 90%;
animation: rotate 1.5s infinite linear;
}
.mercuryOrbit {
left:690px;
top:285px;
height: 190px;
width: 190px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
.venus {
left:600px;
top:330px;
height: 50px;
width: 50px;
background-image: url("venus.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 370% 80%;
animation: rotate 3.84s infinite linear;
}
.venusOrbit {
left:620px;
top:210px;
height: 330px;
width: 330px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
.earth {
left:535px;
top:300px;
height: 70px;
width: 70px;
background-image: url("earth.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 350% 100%;
animation: rotate 6.25s infinite linear;
}
.earthOrbit {
left:570px;
top:160px;
height: 430px;
width: 430px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
#keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class=“solarsys”>
<div class="sun"></div>
<div class="mercuryOrbit"></div>
<div class="mercury"></div>
<div class="venusOrbit"></div>
<div class="venus"></div>
<div class="earthOrbit"></div>
<div class="earth"></div>
</div>
</body>
</html>
How can I add hover effect on the image so that the name of the planet will show? I don't know how to add it.
This issue may stem from the orbits overlapping on your planets. Try adding z-index : 1 for example to one of your planet class and test the hovering again.
Here is an example:
.mercury {
/* rest of your class here */
position: relative;
z-index: 1;
}
.mercury::after {
content: "Hello world";
position: absolute;
font-size: 0.8rem;
background-color: #3f3f3f;
border-radius: 3px;
padding: 0.2rem;
bottom: 100%;
left: 0;
color: white;
display: none;
}
.mercury:hover.mercury::after {
display: block;
}
For more informations on z-index:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would like to transform a div to apply it in front of a panel.
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;
but on bottom right the div doesn't fill to the background.
What is the css property to set it correctly ?
You can add skewX to your css.
I tried this and almost filled the shape :
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 641px;
height: 354px;
-webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
background-color: red;
This code fixes the bottom right corner and takes other answers into consideration:
.background {
position: relative;
width: 960px;
height: 720px;
background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.overlay {
position: absolute;
font-size: 28px;
top: 200px;
left: 149px;
width: 665px;
height: 395px;
-webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
background: linear-gradient(359.2deg, transparent 6%, red 6%)
}
<div class="background">
<div class="overlay"></div>
</div>
Hoping someone can point me right...
I have been trying all day to figure out how to hide a flash behind some html elements, and then reveal the flash object when hovering using css transitions.
I came up with two solutions, each is only %50 of what I really want.
The first example transitions when you hover, and you can click the links, but I want it to transition like example two.
The second example transitions the way I want, but anything behind cannot be clicked.
Where did I mess up? Are my z-index(s) not getting parsed in example two?
Examples: http://jsfiddle.net/zyD4D/
HTML:
<object> Links Work
<br />But Curtains Are Wrong
</object>
</div>
<hr>
<div id="theatre2"> <em id="curtain-left2"></em>
<em id="curtain-right2"></em>
<object> Links Don't Work
<br />But Curtains Are Right
</object>
</div>
CSS:
div#theatre {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre #curtain-left {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
div#theatre #curtain-right {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
#curtain-left {
left: 0;
}
#curtain-right {
right: 0;
}
div#theatre:hover #curtain-right {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre:hover #curtain-left {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre2 {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre2 #curtain-left2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
background-size: 100%;
}
div#theatre2 #curtain-right2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
background-size: 100%;
}
#curtain-left2 {
left: 0;
}
#curtain-right2 {
right: 0;
}
div#theatre2:hover #curtain-right2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: +301px 0px, left top;
}
div#theatre2:hover #curtain-left2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: -301px 0px;
}
.object {
margin: 0.0em auto;
position: relative;
z-index: 1;
}
Change your css to only transition the left and right margins of the left and right curtains respectively.
div#theatre #curtain-left {
...
transition: margin-left 4s ease;
margin-left:0;
left:0;
...
}
div#theatre #curtain-right {
...
transition: margin-right 4s ease;
margin-right:0;
right:0;
...
}
div#theatre:hover #curtain-right {
margin-right:-300px;
}
div#theatre:hover #curtain-left {
margin-left:-300px;
}
and remove the background-size change on hover.
I fixed up your fiddle. http://jsfiddle.net/zyD4D/2/
I found a code for light box using a simple java script from here. The problem here is the transparent background is not coming when i scroll down the page.Here is my css
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
and what i got is jsfiddle
please give me some suggesstions
Thanks for reading :)
try this one,
.black_overlay {
display: none;
position:fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
}
.white_content {
display: none;
position:fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
http://jsfiddle.net/Jz4Zq/2/
You are using height:100% which uses the 100% height for the element it is contained in. You will have to adjust the top property of the element when scrolling, or setting the height by javascript.
I am working on an Background Ad-System and my z-index isn't working.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
See Fiddle.
(Make the right col bigger to see the image and divs better)
Ok.. the wrong div is up... The Code stand at jsfiddle and show at z-index.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
<div id="dimensions">
<div id="adGfwADS" class="adGfwADS" url="http://google.de">
<div id="page">blupp</div>
</div>
</div>
The div id="page" will show but this is wrong then z-index is lower as from adGfwAds and i use position to use z-index but z-index work not =(