I am trying to create a display of an element.
The element needs to have an image and an overlay (which contains text). The overlay on hover needs to have a slide up transition on hover. I have achieved this.
But the problem is that the overlay div goes beyond the image div. While it should appear exactly inside of it.
I am using Bootstrap.
The Div in blue should not go beyond the image left and right boundaries and also should be visible when not hovered only 50px. While hovered, the remaining content should be visible.
This is my HTML Code:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="main-container">
<img class="image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97300&w=350&h=300">
<div class="content">
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
</div>
</div>
</div>
</div>
</div>
This is my CSS Code:
/* Set to 100% of col-md-6 */
.main-container {
width: 100%;
height: 300px;
}
/* Image Container */
.main-container > img.image {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 300px;
z-index: 100;
}
/* Overlay */
.main-container > .content {
width: 100%;
position: absolute;
height: 150px;
bottom: -110px;
left: 0;
right: 0;
z-index: 101;
padding: 10px 20px;
background-color: rgba(52, 152, 219, 0.8);
color: #ffffff;
transition: all ease 1s;
}
/* Overlay Hover */
.main-container > .content:hover {
bottom: 0px;
transition: all ease 1s;
}
FIDDLE
You are using position: absolute, which will position itself relatively to the first parent that also have a position set (other than static), and as you want it to relate to the .main-container, add position: relative; to its rule
Updated based on a comment
Updated fiddle
.main-container {
position: relative; /* added property */
width: 100%;
height: 300px;
overflow: hidden; /* added property */
}
Related
How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:
http://jsfiddle.net/uoq916Ln/1/
The solution on how to avoid mix-blend-mode affects children:
Make child element position relative, give it a width and height;
Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;
Live example
html
<div class="bkdg">
<div class="blend">
<div class="inner">
<h1>Header</h1>
</div>
</div>
</div>
css
.blend {
position: relative; /* Make position relative */
width: 100%;
height: 100%;
}
.blend::before { /* Apply blend mode to this pseudo element */
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: green;
mix-blend-mode: multiply;
}
.inner { /* This is our content, must have absolute position */
position: absolute;
z-index: 2;
}
h1 {
color: white;
}
I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.
There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).
Check out this page for examples
someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.
html
<div class="bkdg">
<h1>Header</h1>
<div class="blend">
</div>
</div>
css
.blend {
background-color: green;
mix-blend-mode: multiply;
width: 700px;
height: 35px;
}
h1 {
color: white;
position: absolute;
top: -15px; left: 10px;
z-index: 1;
}
https://jsfiddle.net/jckot1pu/
It’s impossible to remove an element’s mix-blend-mode from its children.
MDN says that mix-blend-mode:
sets how an element's content should blend with the content of the element's parent and the element's background
To achieve the desired effect, place the child in a separate stacking context and make sure it renders on top of the element with mix-blend-mode set.
You need two things to make this work:
Make sure that your opaque content (your text) is not a child of the element that sets the background and the blend mode. For example, with CSS Grid Layout.
Make sure the text is rendered over, and thus not affected by, the element that sets the background and the blend mode. Setting mix-blend-mode on your background will create a stacking context for it, and you may need to give your content its own stacking context to ensure it gets rendered above it.
Position your elements with CSS Grid:
define a grid container with one auto-sized grid area
place both the background element and the text element into that one grid area (so that they overlap)
let the text element dictate the size of the grid area
have the background element stretch to the size of the grid area, which is dictated by the size of the text element
Then, set isolation: isolate on the text element to ensure it gets rendered above, and not under the background element.
A working example
.container {
display: grid;
grid-template-areas: 'item';
place-content: end stretch;
height: 200px;
width: 400px;
background-image: url(https://picsum.photos/id/237/400/200);
background-size: cover;
background-repeat: no-repeat;
}
.container::before {
content: '';
grid-area: item;
background-color: seagreen;
mix-blend-mode: multiply;
}
.item {
grid-area: item;
isolation: isolate;
color: white;
}
h1,
p {
margin: 0;
padding: 10px;
}
<div class="container">
<div class="item">
<h1>HEADLINE</h1>
<p>Subhead</p>
</div>
</div>
An important note if you're using the excellent pseudoelement ::before/::after solution posted by Rashad Ibrahimov.
I found that I had to remove z-index from the parent element and apply it only to the pseudoelements and child elements before mix-blend-mode: multiply would work.
For example
#wrapper {
position: relative;
}
#wrapper .hoverlabel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* z-index: 90; Uncomment this to break mix-blend-mode. Tested in Firefox 75 and Chrome 81. */
}
#wrapper .hoverlabel::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
z-index: 90;
background-color: rgba(147, 213, 0, 0.95);
}
I am having some troubles on how to structure a new widget I am working on. I am trying to implement a geographic map that contains some hotspots, just like an old school image map. However, for various purposes, I want to accomplish it without the use of image maps.
So far, I have gotten to this incomplete solution:
http://jsfiddle.net/nielsbuus/FZJ8E/1/
HTML:
<div class="parent">
<!-- I'm a container, I need to expand in height, when my children expand, so they don't overlap elements beneath me. Sort of like clearing floats -->
<div class="lower">
<!-- I contain an image. My width is fixed, but my height may vary. -->
<img src="http://placekitten.com/300/325" />
</div>
<div class="higher-container">
<div style="top: 20px; left: 30px" class="higher-spot">foo</div>
<div style="top: 80px; left: 50px" class="higher-spot">bar</div>
<div style="top: 85px; left: 70px" class="higher-spot">baz</div>
</div>
</div>
<div class="successor">
Please keep me below all of this.
</div>
CSS:
.parent {
background-color: #ccffff;
padding: 20px;
position: relative;
}
.lower {
position: absolute;
width: 300px;
background-color: rgba(0,0,0,0.2);
z-index: 0;
}
.higher-container {
position: absolute;
background-color: rgba(255,0,0, 0.3);
}
.higher-spot {
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 255, 0, 0.5);
z-index: 1px;
}
.successor {
font-size: 18px;
font-family: sans-serif;
}
The main problem here is the use of absolutely positioned z-indexed divs. They detach from the rest of the layout, causing the parent container to not expand, thereby placing succeeding elements beneath the absolutely positioned elements.
I am looking for ideas on how to stack two divs (lower and higher-container) on top of each other and have the parent container expand to the size of the lower div.
I am not sure why you are using position: absolute on your .lower container. Use it as relative and then give a top: 0 rule to the .higher-container.
Updated fiddle
You really only need one of your children to be absolutely positioned: the one that is placed on top (.higher-container). This way, .lower which will always be taller than .higher-container will stretch the parent container normally, then the higher-container will be layers, aboslutely, on top. We just need to add a top and left positioning to it:
Here's a jsfiddle: http://jsfiddle.net/rgthree/M6jm8/
.lower {
position: relative;
width: 300px;
background-color: rgba(0,0,0,0.2);
z-index: 0;
}
.higher-container {
position: absolute;
top:0px;
left:0px;
z-index:1;
background-color: rgba(255,0,0, 0.3);
}
I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).
My goal is when X event fires and the mask come up, to show up the holder element over the mask.
Here is a fiddle showing my problem: JSFIDDLE
Here is my HTML:
<div class="leftpanel">
<div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
<div class="holder">asdasdas</div>
</div>
<div class="mask"></div>
<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>
and here's the CSS:
.mask {
opacity: 0.85;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
background-color: #000;
}
.leftpanel {
width: 250px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: red;
padding: 15px;
}
.holder {
width: 230px;
height: 90px;
background-color: #fff;
z-index: 99999; <<<<<<<<<< This is NOT working!
}
Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.
http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.