Hi when I'm hovering on I want the box to flip 180 and stay z-index'd on top of the boxes behind them. How do I achieve this in order to display on top I set the z-index in hover to 100 but as soon as I hover off it goes behind the boxes. I have tried transition delay as well and I'm still getting the same issue. Can someone help me?
<!DOCTYPE html>
<html>
<head>
<style>
.boxfront {
position: absolute;
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
backface-visibility: hidden;
}
.container {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
background-color: red;
transition-property: transform, z-index;
transition-duration: 2s, 10s;
transition-delay:0s,0s;
transform-style: preserve-3d;
}
.container:hover {
transform: scale(2, 2) rotateY(180deg);
z-index: 100;
}
</style>
</head>
<body>
<div class="container">
<div class="boxfront"></div>
</div>
<div class="container">
<div class="boxfront"></div>
</div>
<div class="container">
<div class="boxfront"></div>
</div>
<div class="container">
<div class="boxfront"></div>
</div>
<div class="container">
<div class="boxfront"></div>
</div>
<div class="container">
<div class="boxfront"></div>
</div>
</body>
</html>
Try this:
.container {
z-index: 100;
}
.container:hover {
z-index: 200;
}
https://jsfiddle.net/uop6ehac/
Related
I would like to display two flip cards in a row using grid. Each of the flip cards shall contain a squared image on the front and some text on the back. How can I achieve not having to specify any height within the .flip-card css class? I would like the flip card to automatically adjust its height to the width of the image which itself is dependent on the overall space available within the grid (and therefore changes from device to device). At the moment I have to hardcode the height to make it work. But this inevitably leads the flip card not to be squared but to be a rectangle. Any ideas?
This is my code:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.flip-card {
position: relative;
background-color: transparent;
width: 100%;
height: 200px; /* This value should not be hard coded, but be set according to the width of the image which is determined by the grid. It should make the flip card a perfect square*/
overflow: hidden;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
}
.flip-card-back {
background-color: red;
transform: rotateY(180deg);
}
<div class="grid-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>
</div>
Don't use position:absolute to achieve this. Rely on CSS grid and make both the front and the back of the card on the same area so they overlap while still being in flow element so the area will be defined with the biggest height:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.flip-card {
overflow: hidden;
perspective: 1000px;
}
.flip-card-inner {
display: grid; /* here */
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
grid-area: 1/1; /*and here */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
background-color: red;
transform: rotateY(180deg);
}
img {
max-width: 100%
}
<div class="grid-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
</div>
<div class="flip-card-back">
<p>
Some Text
</p>
</div>
</div>
</div>
</div>
I need a div within first bootstrap column overflow the x-axis and I need to see its content above the second column at its right.
<div class="row h-100">
<div class="col-3 bg-info">
<div class="LEFT">Content to be viewed</div>
</div>
<div class="col-9 bg-danger">Content that can be the shadow.</div>
</div>
div.row{
overflow-x: auto;
}
div.col-3{
overflow-x: visible;
z-index:10;
}
div.popo{
background-color: yellow;
width:600px;
}
I wanted the LEFT div be visible over the second column (col-9). Is that possible?
<div class="row h-100">
<div class="col-3 bg-info">
<div class="LEFT">Content to be viewed</div>
</div>
<div class="col-9 bg-danger">Content that can be the shadow.</div>
</div>
.row {
position: relative;
}
.bg-info {
position: static;
}
.LEFT {
position: absolute;
text-align: center;
top: 50%;
right: calc( ( 4.5 / 12 ) * 100% );
width: calc( ( 9 / 12 ) * 100% ) ;
transform: translate(50%, -50%);
z-index: 2;
background-color: rgba( 1, 1, 1, .3);
}
https://codepen.io/Deykun/pen/GRKVYKZ
You could just give your col-3 div a position: absolute
like so: this will break its content flow and let it appera ABOVE the col-9 div.
.overlay{
position: absolute !important;
top: 0;
left: 0;
background-color: yellow;
opacity: 1;
z-index: 2000;
}
.bg-danger{
opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
<div class="col-3 overlay">
Im Over the col-9 DIV
</div>
<div class="col-9 bg-danger">Content that can be the shadow.</div>
</div>
I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
I am trying to implement the following design in bootstrap3.
Does anyone know how to hover the container2 over the container1?
I can use the position:absolute way but I think there must be a better way to do it.
Thanks.
Try this:
.container-1 {
position: relative;
z-index: 0;
}
.container-2 {
position: relative;
z-index: 1;
top: -50px;
}
HTML:
<div class="container container-1">...</div>
<div class="container container-2">...</div>
You can use margin-top on the "container 2" to get this effect
.container-2 {
margin-top: -200px;
}
http://jsfiddle.net/mwo8jdeL/
http://i.stack.imgur.com/rxKfW.png
Index.html
[![<div class="container-fluid">
<div class="row one">
<div class="col-md-12">
</div>
</div>
<div class="row two">
<div class="col-md-12">
</div>
</div>
</div>][1]][1]
CSS File
.one{
background-color: red;
height: 400px;
}
.two{
background-color: green;
height: 400px;
margin-top: -100px;
margin-left: 15%;
margin-right: 15%;
}
I have A Scenrio where I need to do a Fade-In Animation on a DIV, which wasn't working as desired.
After much experiment, I found out that one of the div's has got "overflow:hidden" in the css class applied to it. If I comment the "overflow:hidden" part, the animation seems to work perfectly.
Though it fixed my problem, However, the question lingers in my mind, whether 'overflow:hidden' doesn not work with opacity animation.
For your perusal, here's the code.
My Browser Chrome 15.0.XXX.X
My OS Windows XP
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#MainContainer {
opacity: 1;
position: absolute;
height: 500px;
top: 10px;
width: 600px;
left: 10px;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
.focussedItem {
position: absolute;
left: 300px;
top: 200px;
width: 450px;
height: 230px;
margin: 0px 0px;
opacity: 1;
}
.innerDiv {
position: relative;
width: 450px;
height: 150px;
left: 10px;
top: 40px;
overflow: hidden; /* This is where the Problem is */
}
.optionItem {
position: absolute;
vertical-align: middle;
text-align: left;
font-size: 35px;
width: 450px;
height: 50px;
left: 25px;
}
#
-webkit-keyframes fadeIn {
0% {opacity: 0;}
100%{opacity:1;}
}
</style>
<script type="text/javascript">
document.onkeydown = KeyCheck;
function KeyCheck(e) {
console.log(e.keyCode);
document.getElementById("MainContainer").style.webkitAnimationDuration = "2000ms";
document.getElementById("MainContainer").style.webkitAnimationName = "fadeIn"
}
</script>
</head>
<body>
<div>press space to test</div>
<div id="MainContainer" class="MainContainer">
<div id="SubContainer" class="focussedItem"
style="height: 290px; top: 250px;">
<div id="OptionRing" class="innerDiv"
style="height: 190px; top: 50px;">
<div class="optionItem" style="top: -40px;">OPTION 1</div>
<div class="optionItem" style="top: 10px;">OPTION 2</div>
<div class="optionItem" style="top: 60px;">OPTION 3</div>
<div class="optionItem" style="top: 110px;">OPTION 4</div>
<div class="optionItem" style="top: 160px;">OPTION 5</div>
<div class="optionItem" style="top: 210px;">OPTION 6</div>
</div>
</div>
</div>
</body>
</html>
#
-webkit-keyframes fadeIn {
change to :
#-webkit-keyframes fadeIn {
# need in the same line
http://jsfiddle.net/wX8DW/
Overflow: hidden does not affect the result