We Keep Coding

How to Transition width/height from center in a table layout

I have a flex layout of items which mimics the look of a table. The idea is to show them all like this but when you hover the hovered item needs to expand in all 4 directions overlapping other items while staying centered. When the mouse leaves the item then it should collapse back to its original size. However, on both mouse enter and mouse leave the transition should be smooth. I got it to work with mouse in, but cannot figure out how to make it smooth on mouse out.
You will see in example below that the mouse out is not smooth because it loses its index value and without that index value I cannot get it to overlap. Is there another way to do this? Javascript solutions are also welcome but not preferred.
It seems when I paste the html/css into SO the hover doesn't work at all. At least on my browser so I'm leaving a js fiddle link where you can see my problem. Just note that when the mouse leaves the box it loses z-index value and thus the right side of that box goes behind the next box while the left side stays on top and transitions properly.
Here is JS Fiddle link: https://jsfiddle.net/1gr036k5/1/
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: 1000px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.wrapper div {
width: 25%;
height: 200px;
background-color: red;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.wrapper.two div span {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
top: 0;
left: 0;
background-color: blue;
opacity: 0;
transition: all 1s ease;
}
.wrapper div:hover {
z-index: 3;
}
.wrapper div span:hover {
opacity: 100%;
width: 120%;
height: 120%;
left: -10%;
top: -10%;
}
<div class="wrapper">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>

Is this you are looking for?
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: 1000px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper div {
width: 25%;
height: 200px;
background-color: red;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 0;
margin: 0;
box-sizing: border-box;
position:relative;
}
.wrapper div span {
display: block;
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
background-color: blue;
transition: all 1s ease;
opacity:0;
}
.wrapper div:hover {
}
.wrapper div:hover span{
transform: scale(2, 2);
opacity:1;
z-index:4;
}
<div class="wrapper">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>

Make <input /> appear on transitioning <div>

I have this setup:
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
justify-content: left;
padding-left: 35px;
}
.text-input {
display: none;
}
.wrapper:hover .text-input {
display: block;
}
<div>
<div class=wrapper>
<div class=element>
<input class=text-input type="text" name="search" />
</div>
</div>
</div>
https://codepen.io/anon/pen/BOzJxL
I need the the textinput to appear next to the hotpink div elemenet (it needs to stay where it is when the input appears). I need it to appear bit-by-bit - sort of being revealed pixel by piyxel. When leaving the div, I want it to be hidden again - same style as it came in.

This will work for you.
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper">
<div class="element"></div>
<input class="text-input" type="text" name="search" />
</div>

Center and layer multiple DIVs with flexbox

I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>

No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>

You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>

I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.

Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}

You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>

How to align all left floated elements in center of their parent?

.container{width:50%;padding:10px;box-sizing:border-box;background-color:#00FF00;}
.container::after {content: ''; display: table; clear: both;}
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}
<div class="container">
<div class="child">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
</div>
I want to align the content of .container in center without using property display: inline-block; on .child.

see here : jsfiddle
EDITED : use display:flex with justify-content:center on the .sub-container and display:inline-block to .child
or you could use float:left on .child , it still works. but i suggest you don't use float when you want to center smth
code :
.child
{
width: 50px;
height: 30px;
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
display:inline-block;
}
.sub-container
{
width: 50%;
height: auto;
padding: 10px;
box-sizing: border-box;
margin: 0px auto;
background-color: #00FF00;
float: left;
text-align: center;
position:relative;
display: flex;
justify-content: center;
}
let me know if this was what you were looking for

Add to .main-container { margin: 0 auto; display: table; } and remove width:100%;

Maybe this can help you:
Add margin 50% - half the width of the container. Just a disclaimer: this is not supported in some of the browsers.
.child {
width: 100px;
height: 30px;
margin-left: calc(50% - 50px);
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
float: left;
}

Moving Circle to Top of Border With CSS

Decomposing my larger problem into this simple statement, I have a blue circle inside a box with a red border.
How do I keep the circle in the center but make it overlap over the top, horizontal line of the box's border?
My attempt looks like to reach the final result: https://jsfiddle.net/pgcft3z7/1/
HTML:
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>
CSS:
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:absolute;
top: -5px;
left: 200px;
}
.container {
margin-top: 40px;
border: solid 1px;
border-color: red;
}
This involves me needing to manually specify a left and top which seems like it won't remain centered or will be very responsive.
Example of what it currently looks like:
https://jsfiddle.net/pgcft3z7/

Here is JSFiddle.
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position: relative;
}
.border {
border: solid 1px;
border-color: red;
width: 100%;
height: 70px;
top: 30px;
position: absolute;
}
.container {
margin-top: 40px;
position: relative;
}
<div class="container">
<div class="border">
</div>
<div class="circle">
Circle Text Here
</div>
</div>

.line{
position:relative; /* in order to contain inner absolute circle pos */
margin-top:50px;
background:red;
height:0;
border:1px solid red;
}
.circle{
position: absolute;
width:40px; height:40px;
top:50%; left:50%; /* 50% of parent */
transform: translate(-50%, -50%); /* -50% of self */
background:blue;
border-radius:50%;
}
<div class="line">
<div class="circle"></div>
</div>

Simply add these to your circle class:
position: relative;
top: -20px;

Look at this one https://jsfiddle.net/pgcft3z7/7/
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:relative;
top: -65px;
left: 0;
}
.container {
margin-top: 100px;
border: solid 1px;
border-color: red;
}
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>