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
Related
I have created two side by side owl carousel scroll elements. Schema:
I want to achieve, that price item description is little bit over owl carousel item borders. Schema:
Can someone please help with this situation using css or jquery.
Edit:
I crated replica. There are two owl elements. I want price:before element to be seen:
$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});
#container {
width: 100%;
height: 200px;
background: blue;
position: relative;
float: left;
}
#banner_section_right {
width: 70%;
background: red;
float: left;
}
#banner_section_left {
width: 30%;
background: green;
float: left;
}
#banner_section_left .item {
width: 100%;
background: yellow;
}
#banner_section_left .item:before {
width: 1em;
background: yellow;
top: 0;
content: "";
position: absolute;
right: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div id="container">
<div id="banner_section_right">
<div class="slider">
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
</div>
</div>
<div id="banner_section_left">
<div class="slider">
<div class="item">
<p>
$1 000 000
</p>
</div>
</div>
</div>
</div>
I have example your can learn from this might help you what you want to achieve.
html:
<div id="container">
<div class="green"></div>
<div class="red"></div>
<div class="box"></div>
</div>
CSS:
#container{
width: 100%;
height: 200px;
background: blue;
position: relative;
}
div.green{
background: green;
display: block;
height: 100px;
}
div.red{
background: red;
display: inlinblock;
height: 100px;
}
div.box{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
have a look at this css property transform: translateY(-50%); this can move object over other.
Working example : http://fiddlesalad.com/css/div-over-other-div
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</div>
</div>
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/
I have a div containing small div's that each have a background-image of a colored ball:
<div class="container">
<div class="ball" style="left: 100px; top: 50px;">
<div class="ball" style="left: 120px; top: 100px;">
<div class="ball" style="left: 140px; top: 150px;">
<div class="ball" style="left: 160px; top: 200px;">
<div class="ball" style="left: 180px; top: 250px;">
</div>
Now I would like to create some sort of pseudo 3D effect, where the balls that have a smaller value of 'top' are smaller , and balls that are more near the bottom appear larger.
I've read some bits about CSS3 transforms and perspective, but I have no idea how to do it.
Is there any way to adjust the width and height of div's , based on its top-property ?
You can create a variable to store top value in css like this style="--top: 10px" and use it later like this var(--top).
Update
You need to use JavaScript to set the --top property using setProperty method and you can get the value of --top using getPropertyValue method. See the example for dynamically changing --top onclick event which changes the --top value and width and height are adjusted automatically.
Code Snippet
balls = document.getElementsByClassName('ball');
Array.prototype.forEach.call(balls, function(ball){
ball.onclick = function() {
ball.style.setProperty('--top', parseInt(ball.style.getPropertyValue('--top')) * 1.2 + 'px')
}
})
.ball {
background-image:url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Soccer_ball.svg);
width: calc(var(--top) * 1.2);
height: calc(var(--top) * 1.2);
background-size: cover;
position: absolute;
}
<div class="container">
<div class="ball" style="left: 100px; --top: 50px;"></div>
<div class="ball" style="left: 120px; --top: 100px;"></div>
<div class="ball" style="left: 140px; --top: 150px;"></div>
<div class="ball" style="left: 160px; --top: 200px;"></div>
<div class="ball" style="left: 180px; --top: 250px;"></div>
</div>
You can set a real 3d transform on the containing element:
.container {
width: 400px;
height: 300px;
position: relative;
perspective: 300px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
transform: rotateX(60deg);
transform-style: preserve-3d;
border: solid 2px green;
}
.ball {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: lightblue;
position: absolute;
transform: rotateX(-60deg);
transform-style: preserve-3d;
}
<div class="container">
<div class="inner">
<div class="ball" style="left: 100px; top: 50px;"></div>
<div class="ball" style="left: 120px; top: 100px;"></div>
<div class="ball" style="left: 140px; top: 150px;"></div>
<div class="ball" style="left: 160px; top: 200px;"></div>
<div class="ball" style="left: 180px; top: 250px;"></div>
</div>
</div>
So I have a few section with a dynamic height(Based on viewport) and I need to be able to position a img as a divider between sections. The only way I can think of to do it is to absolutely position the images. The problem is I don't always know what the fixed height of each section will be.
So is there a way to be able to add a section with positioning relative to itself without having the empty space left over from position: relative.
.section {
width: 100%;
height: 200px;
}
.divider1 {
position: absolute;
left: calc(50vw - 100px);
top: 150px;
}
.divider2 {
position: absolute;
left: calc(50vw - 100px);
top: 350px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="section blue"></div>
<div class="divider1">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section red"></div>
<div class="divider2">
<img width="200" height="100" src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green"></div>
</body>
</html>
Set the divider as a pseudo-element (I've used ::after) on the section element. Position the pseudo element in relation to the section element's bottom. In this way, the height of the section can change, and the divider will be in the right place.
Note - you have to wrap the div's inside a container, so we can disable the ::after on the last section.
.section {
position: relative;
width: 100%;
height: 200px;
}
.section:not(:last-child)::after {
position: absolute;
width: 200px;
height: 100px;
bottom: -50px;
left: calc(50% - 100px);
background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat;
background-size: contain;
content: "";
z-index: 1;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div>
<div class="section blue"></div>
<div class="section red"></div>
<div class="section green"></div>
</div>
If your images have stable dimensions: width="200px" height="100px", then you can place them absolutely positioned inside colored divs and independent of parent height:
.section {
width: 100%;
height: 50vh;
position: relative;
}
.section img {
width: 200px;
height: 100px;
display: block;
position: absolute;
margin-left: calc(50% - 100px);
margin-top: -50px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="section blue"></div>
<div class="section red">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>
<div class="section green">
<img src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
</div>