This question already has answers here:
Specify parent divs opacity but make it not affect children HTML elements
(4 answers)
Closed 9 years ago.
So I'm trying to create a lightbox like feel. I created a #blackout div and an #enlargedBOX div.
The #blackout div has it's opacity set to 90%, because I want the background website to show through just a bit, however i do NOT want my #enlargedBOX div to use that same opacity. It seems that #blackout forces its own opacity onto anything within itself. How can i stop that?
<div id="blackout">
<div id="enlargedBOX">
<img src="" width="500" height="500" border="0" />
</div>
</div>
Here's a jsFiddle
You'll see that the RED background shows through on the white #enlargedBOX div.
Just use rgba() - DEMO
#blackout {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
overflow:auto;
z-index:100;
background: rgba(0, 0, 0, .9);
}
Take the enlargedBOX dialog div out from within the blackout background overlay div, and give it a higher z-index.
jsFiddle example
#enlargedBOX {
position:relative;
z-index:101;
margin:50px auto;
padding:0px;
width:500px;
height:500px;
background:#FFF;
opacity:1;
}
<div id="blackout"></div>
<div id="enlargedBOX">
<img src="" width="500" height="500" border="0" />
</div>
Related
How can one add opacitiy to just the left 100px of a 600px wide image in css? Is there a css property for that?
I have tried to add an overlapping div and add opacity to this div, but that is a pain in the back and does not look as a good solution.
Well i found that overlapping div with position:absolute is the only solution for this because their is no property in css to catch half image.
HTML
<div class="parent">
<div id="opacity_div"></div>
<img class="half_fade" src="http://i.stack.imgur.com/W7mPR.jpg?s=32&g=1">
</div>
CSS
.parent{
position:relative;
}
#opacity_div{
background:#fff;
height:20px;
width:20px;
position:absolute;
top:18px;
left:6px;
opacity:0.5 /* manipulate to desired opacity */
}
img.half_fade {
position:absolute;
top:0;left:0;
z-index:-1000;
}
Example : http://jsfiddle.net/JMBFS/81/
Checkout this question to understand better : https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029
The solution is to use overlay the image element with another image element, using position absolute and clipping (http://codepen.io/anon/pen/jqpwgV).
HTML:
<img src="img.jpg" id="image-overlay" />
<img src="img.jpg" id="image" />
CSS:
#image-overlay{position:absolute;clip: rect(0px,498px,374px,100px);}
#image{opacity:0.5;}
If you want to be future ready. Use clip-path with graceful degradation in your CSS. See code below (or http://codepen.io/anon/pen/zqLdxW).
#image-overlay{position:absolute;
clip: rect(0px,498px,374px,100px);
-webkit-clip-path: inset(0px 0px 0px 100px);
clip-path: inset(0px 0px 0px 100px);
}
#image{opacity:0.5;}
This question already has answers here:
Opacity of div's background without affecting contained element in IE 8?
(8 answers)
Closed 7 years ago.
I'm trying to set an opacity to my background div, but all the content inside gets an opacity too. I don't want this.
I tried to fix it with pseudo elements but it didn't work out, I can fix this problem by adding a second background div and setting a height and position to that div, but I don't want to set a height for a div.
How can I fix this without adding a second div and height?
You can see my demo here
You could always use an RGBA value:
html {
background-color: red;
}
#login {
width: 365px;
background-color: rgba(255, 255, 255, 0.3);
padding: 37px;
}
https://jsfiddle.net/d2shse4c/2/
What i usually make to do this is sibling divs with position absolute:
<div id="page">
<div id="content">
TEXT here
</div>
<div id="back" style="position:absolute; opacity:0.5; left:0; top:0; width:100%; height: 100%; background-color:#000000;">
</div>
<div id="anotherText" style="position:absolute; width:100px; height: 100px">
TEXT
</div>
</div>
and so on....
OR:
Set a png background image on the parent div!
I'm trying to overlay two div elements, the underlying has a background the overlaying can not have one, since later there will be a background image in the back.
I want the underlying text to be cut off at the place where it is behind the overlaying div.
The only way I found was to set background-color: white; to the overlaying div, as mentioned this is not possible.
Any tip/solution how do I accomplish this?
<div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;">
This is a TEST text.
</div>
<div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;">
Top Element
</div>
Would this work for you? Basically, I've added a third div with the background color white that you can set it's display to none when the image goes into the lower div. This is mainly just a thought, it can probably be applied to the lower div instead.
<html>
<head>
<style>
#botDiv{
background-color:red;
z-index:1;
overflow:hidden;
position:absolute;
left:262px;
top:222px;
width:191px;
height:48px;
}
#topDiv{
border:1px solid black;
z-index:2;
overflow:hidden;
position:absolute;
left:152px;
top:177px;
width:199px;
height:156px;
}
#interSectingDiv{
background-color:#fff;
position:relative;
top:26px;
left:109px;
overflow:hidden;
width:191px;
height:48px;
display:block;
}
</style>
</head>
<body>
<div id="botDiv">
This is a TEST text.
</div>
<div id="topDiv">
Top Element
<div id="interSectingDiv"></div>
</div>
</body>
</html>
[ updated ]
Another thought, is that you can probably shorten the width of the lower div by the amount of space it consumes from the higher div and position it at the right edge of the higher div until the image goes in (you'll most likely have to use animation in your css that's triggered by some form of javascript).
I would like to float 5 pictures next to eachother; Upon hover of any of them i want the hovered over image to grow in width without pushing the images next to it Away from it. I want everything to stay in place but for the picture being hovered over to grow in size. How would i do this.
Live demo
Hi now used to this css without floating
Css
.parent{
border:solid 1px red;
width:100px;
white-space:nowrap;
font-size:0;
}
.parent img{
border:solid 1px black;
vertical-align:top;
}
HTML
<div class="parent">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
</div>
Live demo
---------------
Updated demo
Clipping an image with CSS and everything looks great with FireFox and IE7+, but Chrome and Safari are not accepting the position:absolutevery nicely. Instead of staying "relative" to the parent containers, it's in fact using the absolute positioning coordinates.
I've tried putting containers and positioning those in different ways, but I'm not having any luck.
Unfortunately, I can not provide any example directly.
Here's the HTML:
<div class="grayBkgd marginTop10Px grid_3 grayVideoContainer alpha">
<a href="?ytID" class="noUnderlineHover curser-pointer">
<div class="clip">
<img src="an image" alt="" />
</div><br />
<div class="videoTextInfo">
<p class="videoTitle">Optical Windows Overview
</p>
</div>
<p class="grayText" style="float:right">0:37 mins</p>
</a>
</div>
The CSS:
<style type="text/css">
.grayVideoContainer{
text-align:center;
padding:3px 0 5px 0
}
.clip img {
position:absolute;
margin-left:-58px;
clip:rect(12px 120px 79px 0)
}
.videoTextInfo {
min-height:60px;
padding:70px 5px 0 5px;
color:#000
}
.grayText {
float:right;
margin-top:-10px;
padding:0 5px 0 0
}
</style>
Any ideas?
I tried looking for JQuery plugins to clip the image and see if I'd have an easier time positioning the elements, but I didn't have very much luck finding any promising plugins.
Are the parent containers positioned at all? If not, try to add position: relative; to the parent of the child that's position: absolute;. The relative positioning won't change the parent's position in the flow of your site but will allow you to have absolutely positioned children.
An absolutely positioned element's position should be specified with top, left, right, and/or bottom.
See: http://www.w3schools.com/css/pr_class_position.asp
The margin-left on .clip img I might expect not to work.