Develop Reference

Focus DOM above overlay

Am trying to make a whole screen overlay, and just pop a single DOM above it, it is kind of web game tutorial which tell the user which button he should press.
Like the above image illustrate, am trying to hide everything under the overlay and only pop the red icon above it
What I've tried so far
I've added a div directly under the body tag (this will be the overlay) that will have a z-index greater that other elements in the page, and only the focused DOM will have a greater z-index than the overlay
Issue
This didn't work because am having a translate for the opts-container element, and remove this style is not an option for me because am using it all over the elements.
code (to illustrate)
$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
console.log("hovered");
$("#veil").show();
})
$("#veil").on('mouseleave', function(){
console.log("hide");
$("#veil").hide();
});
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
#veil {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
#policy {
z-index: 102;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="veil">
</div>
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>
possible solutions in my mind
1- make clipped overlay
2- clone the focused object to be inside the veil div
3- focus the parent of the object and reduce opacity of child elements (workaround)
how can I pop an element over an overlay even if it has a transform style ?
maybe a hack around ?

Consider a big box-shadow on the element instead of an overlay:
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
/* Make sure the stacking context is also on the top */
#opts-container:hover {
z-index:9999;
}
/* make the element on the top and add a big shadow
100vw + 100vh will make sure that you will cover all the screen
Or use any other big value
*/
#opts-container:hover #policy {
position:relative;
z-index:9999;
box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>

Make content overflow

I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?
I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.
Any ideas?
$(document).on("click", ".duplicate", function() {
var $wrapper = $('.wrapper .inner');
$wrapper.find('.color').each(function() {
$wrapper.append($(this).clone());
});
});
.wrapper {
width: 75%;
margin: 12px auto;
height: 26px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
.wrapper .color {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
</div>
<button class='duplicate'>
Duplicate
</button>

In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.
Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.
But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...

I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:
.wrapper {
width: 75%;
margin: 12px auto;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 25px;
display: flex;
border-radius: 6px;
overflow: hidden;
}
.wrapper .color {
width: 100%;
height: 100%;
}
.new {
margin-top:5px;
height:25px;
border-radius: 6px;
background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
background-size:100% 100%;
animation:change 5s linear infinite alternate;
}
#keyframes change {
from {
background-position:0 0;
}
to {
background-position:-1000px 0;
}
}
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
<div class="new"></div>
</div>

Create a div with aspect ratio 1:1 knowing only its height in percentage

I was wondering if you can help me with this.
I have a div (in white) where I need to put two circular buttons (in green) on the borders. Everything should be done with CSS.
It should look like this:
Screenshot
Now, the thing is that I don't know the size of the white div, and I won't know it at the time of creation, because it will get added to the DOM afterwards. All I know is that the white div has a percentage width and height relative to its future parent. So, at the time of creation, since it's not yet added, any calls to width(), height() or its css values won't work.
I've seen all those snippets that tell you how to make a div with a fixed aspect ratio. I need this now, I need the button to be 1:1, but all I know about the dimensions, is that it has to be 100% of the height of the white div (and therefore, its width should be equal as its height). All the examples I've seen assume that you know the width and to make the height keep the ratio. In my case, what I know is the height (100%) and I want the width to adapt.
I have no idea how to achieve this.
This is my snippet:
body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
}
.arrow:after{
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
https://jsfiddle.net/7bxecL9m/
If you know how can I do this without entering any fixed value (jQuery use is of course valid), I'd really appreciate it.
Thanks.

There are many variables here:
Since container's height is % and circle radius is px units, one is static and the other one will resize.
The only way to preserve 1:1 with just html/css, considering the container's height % will resize circle's height as well, would be to isolate circle's div width & height to something static like px units.
Now, since you said no fixed dimensions, the only thing I can think of is to comment .arrow's 100% height, to prevent resizing other than 1:1, and nesting a div inside .arrow to restrain 1:1 with static units (ideally impacting .arrow directly would be less code but if you don't want/can't set them on that element, maybe you consider this).
If you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You could use Javascript to achieve this, but your border-radius is tied to container's in px static units, since container will always be bigger something like border-radius: 50% wouldn't work for both, 50% radius of circle would never match 50% of container's (that is, if you care about radius alignment).
body {
background-color: #DCDCDC;
}
body,
html {
height: 100%;
}
.container {
width: 50%;
height: 37%;
background: white;
border-radius: 20px;
position: relative;
}
.arrow {
background: green;
border-radius: 20px;
/*height: 100%;*/
position: absolute;
overflow: hidden;
}
.bLimit {
height: 40px;
width: 40px;
line-height: 40px;
}
.arrow:after {
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow">
<div class="bLimit">button overflow</div>
</div>
<div class="arrow">
<div class="bLimit">button</div>
</div>
</div>

Why not doing a fixed width in percent for your arrow :
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
width: 10%;
}

body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.container:after,.container:before{
content: " ";
display: block;
padding: 4%;
z-index: 999;
top: 0;
position:absolute;
background: green;
border-radius: 50%;
}
.container:before {
left: 0;
}
.container:after{
right: 0;
}
<div class="container">
</div>
You can achieve using before and after CSS pseudo selectors. You check this Example.

There is a posibility to get this result using a image (that won't show) of the required ratio.
In this case, the ratio is 1:1 so we will use an image of 50px (but it can be any size)
.container {
width: 300px;
height: 20px;
border: solid 1px blue;
margin: 40px;
position: relative;
}
.container:nth-child(2) {
height: 40px;
}
.container:nth-child(3) {
height: 60px;
}
.arrow {
height: 100%;
background-color: red;
opacity: 0.5;
position: absolute;
border-radius: 50%;
transform: translateX(-50%);
}
.arrow:last-child {
right: 0px;
transform: translateX(50%);
}
img {
height: 100%;
opacity: 0;
}
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>

Using pure CSS, make a div centered until it runs into sidebar from resizing the window?

I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?

This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
» JSBin

Conflicting hover/mouseover functions

Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!

As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/

Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go