I have a div (id=alertPanel) that I want to put in front of another div (id=captchaPanel). The captchaPanel div has an opacity of .25 -- but I want the front alert DIV tp be 100% opaque. (I am going for a lightbox-like effect). Both DIVs have IDs and are not in classes. I assign the back div an opacity of .25 and the front div an opacity of 1 -- but the front div still is not opaque (in Chrome and Safari at least... so likely also in FF and IE). I am making an ID-specific rule in a simple application of CSS, so I am confused about why I am getting this result.
Here is the HTML:
<div id='captchaPanel'>
<div id='alertPanel'>
in the middle
</div>
//some HTML
</div>
Here is the CSS:
#alertPanel
{
height: 10%;
width: 10%;
margin-left: auto ;
z-index:1;
margin-right: auto ;
position: absolute;
background-color:blue;
float:none;
opacity:1 !important;
}
#captchaPanel
{
height: 60%;
width: 57%;
background-color:#580200;
vertical-align:middle;
margin-left: auto ;
margin-right: auto ;
border-radius:15px;
opacity:.05;
z-index:-1;
}
A child will inherit the opacity of its parent.
If you are only using colors, change the #captchaPanel to use rgba:
background-color: rgba(0,0,0,.05);
fiddle
You could also change the markup so that alertPanelis not a descendant ofcaptchaPanel`
<div class="wrapper">
<div id='captchaPanel'>//some html</div>
<div id='alertPanel'>in the middle</div>
</div>
fiddle 2
Related
I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:
Click to see example screenshot
I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:
Click to see example screenshot
Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.
Try this:
*{
padding:10px;
}
.parent {
margin:auto;
width:300px;
background-color:red;
}
.breadcrums {
background-color:blue;
}
.full-width {
background-color: green;
position:relative;
width:100vw;
left:50%;
transform:translateX(-50%);
}
<div class="parent">
<div class="breadcrums">breadcrums</div>
<div class="full-width">full-width element</div>
</div>
The important part here being position, width, left and transform on .full-width.
Applied the css " left " property if that div has "absolute" position.
Thank you for your replies. Here are the html and css:
Html:
<div class="crumbs_wrapper">
<div class="MCBreadcrumbsBox" >
<span class="MCBreadcrumbsPrefix">You are here:</span>
B1
<span class="MCBreadcrumbsDivider"> B2 </span>
B3...
</div>
</div>
CSS:
div.crumbs_wrapper
{
position: fixed;
float: none;
width: 100%;
z-index: 1;
}
div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
padding-top: 18px !important;
padding-left: 10px !important;
float: left;
position: relative;
margin-top: -12px;
background-color: #FFF;
z-index: 999;
width: 100%;
max-width: 104.5em;
box-shadow: 1.5px 1.5px 15px #888888;
}
Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.
If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.
I am working on a css piece where I need to render a circle at the top of the div. I got to do that with border radius.
But I wanted to get a smoother curve, so I got to increase the width and align it using left value. But now I get a horizontal scroll bar in the page. Is there a way to avoid the horizontal bar. I tried to overflow values and that didn't seem to help.
PS: This is for < 700px media query.
#semi-circle {
height: 70%;
width: 180%;
border-radius: 235px 235px 0 0;
-moz-border-radius: 235px 235px 0 0;
-webkit-border-radius: 500px 500px 0 0;
background-color: red;
top: 157px;
margin-right: 0;
left: -215px;
overflow: auto;
}
https://jsfiddle.net/5oorwmxd/1/
You need to wrap your div with another, and then overflow-hidden the wrapping element. For instance:
https://jsfiddle.net/5oorwmxd/3/
CSS:
.wrapper{
overflow:hidden;
width:100%;
}
HTML:
<div class="wrapper">
<div id="semi-circle">test</div>
</div>
Can you put it inside a container with 100% width and hidden overflow?
<div class="container">
<div id="semi-circle">test</div>
</div>
and CSS
.container {width:100%; overflow:hidden;}
https://jsfiddle.net/6q8nndzL/
To achieve what you want you can just use the border-top-left-radius property instead of using the shorthand border-radius.
jsFiddle
CODE SNIPPET:
#semi-circle {
background-color: tomato;
padding-left: 15px;
transition: border-top-left-radius 1s ease-in;
}
#media (max-width: 700px) {
#semi-circle {
border-top-left-radius: 235px;
}
}
<div id="semi-circle">test</div>
NOTES:
You have several things wrong in your code.
First, you cannot set top, left, right or bottom values if your element's position is static, which is the default position value for every element. So just remove those properties.
Second, using a percentage in height requires the element's parent to have a defined height, which in this case it does not, so remove it.
There's no need to increase the width, nor setmargin-right to 0.
I making a animation on set of DIV's which are wrapped inside div with id="wrapper"
using CSS3.
However if I hover on the rounded box, the animation is left aligned but not center aligned.
The URL for the code is #http://jsfiddle.net/X5Ycu/
<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>
Thanks & Regards
Alex
change the blocks from inline-block to display: block
add margin 0 auto
remove the position absolute
quick fiddle here
http://jsfiddle.net/ktcle/X5Ycu/2/
#wrapper{
position:relative;
width: 400px
}
.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;
}
Try below:
div.roundedbox:hover{
width:100px;
left: 137.5px; //Add this line
}
You can add margin applied effect like TOP and BOTTOM also RIGHT and LEFT to these two applied to half the original size
see that example: http://jsfiddle.net/X5Ycu/1/
.limeball{
margin: 0px; // original margin
width: 100px; //original width
height: 50px; //original height
}
.limeball{
width: 0px;
height:0px;
margin: 25px 50px;
// margin results:
// (original width) / 2 = 50px (LEFT AND RIGHT)
// (original height) / 2 = 25px (TOP AND BOTTOM)
}
Well, if you use modern CSS as you say, then you could specify:
left: 50%; /* or figure out where the center is */
And then just move the element to its half size to the left, which you can do using transform:
transform: translateX(-50%);
So now, even when your element is changing its size, also its position (translation) will change according to its size. This (the translation) will always work, regardless of how your element is positioned or displayed.
You will surely need to use some vendor prefixes.
This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- http://twoarmsinc.com/work/category/all. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).
Here's a CodePen: http://codepen.io/anon/pen/iIsGm/
html:
<div>
<div class='overlay'></div>
<img src="http://placekitten.com/300/200" alt="thumb">
</div>
css:
.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}
Apologies for the ambiguity- any and all help is greatly appreciated!
You will first need to swap .overlay with the img, so it comes second in the stack.
You have some options for the .container div, but you'll need to set a width to set up a grid. I didn't include it in the fiddle, but you will likely want to set img to max-width: 100%; width: auto; height: auto;, so they can resize and keep their aspect ratios when the browser is resized. For .container, you can also use float: left with a set width. I used display: inline-block here to reduce the amount of code.
DEMO
DEMO with multiple divs floating and simple grid
CSS:
.overlay{
background:rgba(0,0,0,0.5);
position:absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
color: white;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
display: block;
}
.container {
position: relative;
display: inline-block;
}
.container:hover > .overlay {
opacity: 1;
}
HTML:
<div class="container">
<img src="http://placekitten.com/300/200" alt="thumb">
<div class='overlay'>Some text</div>
</div>
I'm sorry if this is a duplicate. I looked through the related posts and couldn't find anything similar to what I'm dealing with.
I have an image that when hovered on, the opacity reduces. I have text in a DIV above the DIV containing the image, which is affected by the opacity setting of the image. The text is suppose to stay solid, while the image becomes transparent. Unfortunately, both elements are becoming transparent on hover. I thought that since the text is considered a parent element, it should not be affected by the opacity setting of the image.
html:
<div class="album large">
<div class="writing">
<h1>blah</h1>
</div>
<div class="opac">
<img src="background/runaways.jpg">
</div>
</div>
CSS:
.album img
{
display:block;
margin: auto;
}
.album.large
{
background-image: url('background/bigblack.jpg');
background-repeat: no-repeat;
background-position: center;
margin-bottom: 50px;
}
.writing
{
position: absolute;
color:red;
left: 50%;
margin-left: -270px;
}
.opac img:hover
{
opacity: .4;
filter:alpha(opacity=40);
}
Solve opacity issue of parent div
Using Pseudo-elements we can get rid of this, Check the link given below for more details.