I am very new to coding so I am sorry if this is a simple question. I am trying to fade out the background while fading in the text using hover states.
This code works, however, I cannot seem to figure out why the hover state extends past the red square. I would like the hover state to only work when you mouse over the red square.
.relative{
position: relative;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
I think the reason is that the relative class is not the same size as the background, to fix this, add
height: 100px;
width: 100px;
to the relative as well.
Full code below
<DOCTYPE! html>
<html>
<head>
<style>
.relative{
position: relative;
height: 100px;
width: 100px;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
</style>
</head>
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
</html>
Related
i going to create a progress bar, just like the picture below(ues red and green for sharp contrast).
progress bar
my codes is as follows
// react
class App extends React.Component {
render () {
return (
<div className='home-page-wrapper'>
<ProgressBar />
</div>
);
}
}
// css
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
.inner {
width: 100%;
height: 100%;
background: red;
transform: translateX(100px);
}
}
the problem is that the red div can not full cover the green one, it looks like that the red div has a green border, how can i do?
Please try this:
.progress-bar {
width:90%;
height:30px;
overflow:hidden;
background:green;
border-radius:6px;
}
.bar {
float:left;
height:100%;
background:red;
}
<div class="progress-bar">
<div class="bar" style="width:45%">
</div>
</div>
You may use this code:
.outter {
width: 260px;
height: 46px;
border-radius: 22px;
background: green;
overflow: hidden;
}
.outter .inner {
height: 100%;
background: red;
border-radius: 22px;
}
<div class="outter">
<div class="inner" style="width: 70%;"></div>
</div>
change the .inner width property to perform the progression.
I have a simple div that goes down when hovered over. As the line goes down I want all the part of the page above the line to be colored with any color but I can't figure out how.
It can be only with HTML & CSS.
.a1:hover {
transform: translateY(96vh);
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 4s;
background-color: #0000ff;
}
<div class="a1"></div>
you have to increase the height instead of translate transform...
change your css to this:
.a1:hover {
height: 96vh;
}
.a1 {
top: 20px;
height: 20px;
position: relative;
transition: all 2s ease-in;
background-color: #0000ff;
}
codepen example
This is a way to do it (written by following this answer)
.a1:hover{
transform: translateY(96vh);
}
.a1{
top:20px;
height: 20px;
position : relative;
transition: all 4s;
background-color:#0000ff;
}
.a2{
width:100%;
height:0vh;
transition: height 4s;
}
.a1:hover + .a2{
background-color:#000;
height:96vh;
}
.a2:hover{
background-color:#000;
height:0vh;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Lab2.css">
<title>Lab2b</title>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
I am in quite a pickle...
So here is my situation, I want to make a moving animation when the mouse hovers over it.
When this happens, I would like text that is layered over this div to remain in the same position.
In my setup, I have a parent div that controls the yellow div inside it when the mouse hovers over it. Also inside the parent div is the text that I would like to position over the edge of the yellow div and remain static during the animation.
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
css:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
This is what it is making
No matter what I do I simply cannot find a way to put the text over the moving divider without it:
Not staying on the same x plane as the moving div
Being transformed with the moving div
Wish this is what you looking for. If you didn't want the text to move you should add position absolute to your yellow div and also relative position to your parent div. then you can position the yellow div as you want. Also, you should put the width: 80%; before your scaleX(0) so that transform can work and also you should give the scaleX transform, 0 as a value, not 0px.
Run the snippet to see the result.
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I have made a rough snippet for the use case please build on top of it.
.relative{
position:'relative';
width:150px;
height:50px;
}
.static{
position:absolute;
}
.hoverable{
width:100%;
height:100%;
background-color:yellow;
transition:transform 1s;
}
.hoverable:hover{
transform:translate(150px,0px);
}
<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
/*added this class*/
.child-1 {
position: absolute;
z-index: 10;
}
#yellow-con {
background-color: #000000;
position: relative;
height: 25px;
}
.yellow {
position: absolute;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 100%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(1);
}
#yellow-con:hover b {
color: black;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="yellow-con">
<div class="child-1"><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
This has been asked before but none of the answers seem to be working for me.
My issue is related to a lost z-index when a transformation is applied.
I have an overlay div with a defined z-index, it has a sibling with no z-index and this div contains a child with a z-index greater than the overlay. This child can be dragged around.
At some point I rotate this sibling and it's child loses the z-index.
How can I prevent this from happening?
I tried several solutions attemps like transform-style: flat; or transform-style: preserve-3d; but with no luck
This is the code
HTML
<div class="main">
<div class="some_container">
<div class="drag"></div>
</div>
</div>
<div class="overlay"></div>
<br><br><br>
<button>rotate!</button>
CSS
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.main {
border: 1px dashed blue;
padding: 15px;
}
.some_container {
position: relative;
background-color: green;
}
.overlay {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 5
}
.drag {
position: relative;
width: 30px;
height: 30px;
background-color: lime;
z-index: 10;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
.rotated .drag {
background-color: yellow;
transform: rotateZ(-15deg);
position: relative;
z-index: 100;
transform-style: flat;
}
JS
$(".drag").draggable();
$("button").click(function()
{
$(".some_container").addClass("rotated");
});
fiddle: https://jsfiddle.net/2zkn9dap/
The transform that you have in your .rotated class creates a new stacking context that is changing the order that the elements are layered. A great explanation with more detail can be found here: z-index is canceled by setting transform(rotate)
The best approach to solving this is to move the .drag div to be a sibling of the .overlay and .some_container div. Then update your JS to add the rotated class to the green and yellow squares so they are both rotated. Otherwise, you'll never be able to get the yellow square on top of the red one consistently, because the z-index of the parent, in this case the .some_container div takes precedence.
$("button").click(function(){
$(".green").addClass("rotated")
$(".lime").addClass("rotated").css({backgroundColor: 'yellow'});
});
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.container {
border: 1px dashed blue;
padding: 15px;
}
.green {
position: absolute;
background-color: green;
z-index: 2;
}
.red {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 3;
}
.lime {
position: absolute;
width: 30px;
height: 30px;
background-color: lime;
z-index: 4;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
<div class="container">
<div class="green">
</div>
<div class="lime"></div>
</div>
<div class="red"></div>
<br><br><br>
<button>rotate!</button>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
Change the position: relative to absolute of .lime.
If you don't want to rotate the '.lime' div, then remove `.addClass("rotated") on the 4th line of the script.
I want to apply transition to more than one div class.
I want to make an animated show so, I need to animate a lot of divs.
I have tried all possible sources on internet.
Here is my coding:
<html>
<head>
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width:400px;
}
</style>
</head>
<body>
<div class ="line1"></div>
</html>
Try like this: Demo
.line1 div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
margin:10px;
}
.line1 div:hover {
width:400px;
}
There is no problem to just create many divs with the same class.
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line1">
<div class="line1">
Or create multiple classes for different transitions:
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.line2 {
width: 100px;
height: 100px;
background: black;
transition: width 2s;
}
.line3 {
width: 100px;
height: 100px;
background: green;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line2">
<div class="line3">
Check out this on codepen http://codepen.io/antoniskamamis/pen/hjBrE
It is a great example of using css only to do transitions between a serious of divs.
HTML
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
CSS
body{background:#000;}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
You need to define a Transition Class and a transition Hover class in CSS
In given code Make Div tag (which you want to trns) member of Trans class <div Class="Trans">
Here is code
<html>
<head>
<style type="text/css">
.Trans
{
margin:20px;
width: 100px;
height: 100px;
transition: width 2s;
background: gray;
}
.normal
{
margin:20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover
{
background: green;
width:400px;
}
</style>
</head>
<body>
<div Class="Trans">Div Trans</div>
<div class="normal" >Div_Normal</div>
<div Class="Trans">Div Trans</div>
<div class="normal" Div_Normal>Div_Normal</div>
</body>
</html>
Style
.Trans //Style You need to apply on transition
transition: width 2s;//Transition Statement Must be included in .Trans Class
.normal //Normal Div you don't need if you dont want to apply any style
.Div.Trans: Hover //Olly apply hover of a Div Which Having class of Trans
You can check it in given code snippest
.Trans {
margin: 20px;
width: 100px;
height: 100px;
transition: width 2s;
background: red;
}
.normal {
margin: 20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover {
background: green;
width: 400px;
}
<body>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
</body>
Instead of adding transitions to each class, add them all together in a comma separated list
.line1, .line2, .line3 {
transition: 1s width ease;
}