I have a working transition and a broken transition, as far as I can tell I'm doing the same thing on both.
main.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Lorem ipsum</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="content">
<div class="button"><span class="button-content">transformer</span></div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</body>
</html>
main.css:
#content {
background-color: lightgray;
transition: width 2s ease, height 2s ease;
}
#content:hover {
width: 800px;
height: 400px;
}
.button {
background-color: gray;
width: 100px;
height: 50px;
border-radius: 10px;
border: 2px solid #73AD21;
text-align: center;
transition: width 2s ease, height 2s ease;
}
.button:hover {
width: 150px;
height: 100px;
}
.button-content {
line-height: 50px;
}
The button transitions nicely when hovered over, but the content div changes size instantly with no transition! I'm at a loss.
It's because the height and width for the #content div before hover takes place are not defined. The buttons dimensions are defined.
Related
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 have a simple webpage I'm working on, and I wanted to add a search bar to the page. However, when I added the search bar, it wouldn't let me click/type in the bar. I eventually found out that I was able to click/type into it after removing this div:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
This is used to put a logo on the header of my page, and I haven't been able to figure out why this breaks the search input. Obviously I want to keep this logo on my header, but any help would be appreciated.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
#background: url("src/header.png") no-repeat;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input[type="text"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="text"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
<h1>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
and here is my styles.css:
h1 {
font-family: "Roboto", "Arial";
}
.header {
overflow: hidden;
background-color: #522e81;
position: relative;
z-index: 1;
height: 77px;
}
.imagediv {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
max-width: 10%;
max-height: 10%;
}
input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
width: 30%;
}
Your imageDiv should be placed inside header div. That's the reason it's overlapping with input box and you are not able to type. Hope it helps man!
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>
I am trying to build a webpage in html & css with 6 columns. Desired behaviour is that when the user hovers over 1 column, it expands over the top of the other 5 to display additional information, and when the user stops hovering, the column shrinks back down.
Each div is set in the CSS to transition width and margin-left to cover the whole width of the screen. On hover, the z-index is also set to 1000, to ensure the chosen column covers the rest of the content.
However, when hovering ceases, as the z-index returns to undefined immediately, the shrinking column snaps behind all columns to the right of it, which is quite jarring.
I am hoping to figure out a way I can keep the most recently hovered column persisting as the highest z-index value long enough for it to close, and then be reset so that any other column getting expanded can take precedence.
I have tried using z-index with transition and also transition-delay, however z-index doesn't seem bound by any sort of transition timer. Even when grouping it with other transition-delay effects, the column jumps behind everything to the right of it immediately, and then when the delay timer is up the transition begins.
body{
padding: 0;
margin: 0;
}
.category {
float: left;
width: 16.66%;
text-align: center;
}
#column1{
background-color: #147afaff;
transition: width 1.5s;
position:absolute;
height: 100%;
}#column2{
background-color: #fa9414ff;
transition: width 1.5s, margin-left 1.5s;
position:absolute;
left:16.66%;
height: 100%;
}#column3{
background-color: #2bae66ff;
transition: width 1.5s, margin-left 1.5s;
position: absolute;
left:33.32%;
height: 100%;
}#column4{
background-color: #fdd20eff;
transition: width 1.5s, margin-left 1.5s;
position:absolute;
left:49.98%;
height: 100%;
}#column5{
background-color: #603f83ff;
transition: width 1.5s, margin-left 1.5s;
position:absolute;
left:66.64%;
height: 100%;
}#column6{
background-color: #f93822ff;
transition: width 1.5s, margin-left 1.5s;
position:absolute;
left:83.30%;
height: 100%;
}
#column1:hover{
width: 100%;
z-index:1000;
}#column2:hover{
margin-left: -16.66%;
width: 100%;
z-index:1000;
}#column3:hover{
margin-left: -33.32%;
width: 100%;
z-index:1000;
}#column4:hover{
margin-left: -49.98%;
width: 100%;
z-index:1000;
}#column5:hover{
margin-left: -66.64%;
width: 100%;
z-index:1000;
}#column6:hover{
margin-left: -83.30%;
width: 100%;
z-index:1000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Expanding Columns</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="Website Header"></div>
</header>
<section id="categories">
<div class="row">
<div id="column1" class="category">
<h1>Column 1</h1>
</div>
<div id="column2" class="category">
<h1>Column 2</h1>
</div>
<div id="column3" class="category">
<h1>Column 3</h1>
</div>
<div id="column4" class="category">
<h1>Column 4</h1>
</div>
<div id="column5" class="category">
<h1>Column 5</h1>
</div>
<div id="column6" class="category">
<h1>Column 6</h1>
</div>
</div>
</section>
</body>
</html>
Make the z-index to have instant change on hover and a delay on unhover. make sure you set the default value too.
Relevant code:
.category {
transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
z-index:0;
}
.category:hover {
transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}
Full code
body {
padding: 0;
margin: 0;
}
.category {
float: left;
width: 16.66%;
text-align: center;
transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
z-index:0;
}
.category:hover {
transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}
#column1 {
background-color: #147afaff;
position: absolute;
height: 100%;
}
#column2 {
background-color: #fa9414ff;
position: absolute;
left: 16.66%;
height: 100%;
}
#column3 {
background-color: #2bae66ff;
position: absolute;
left: 33.32%;
height: 100%;
}
#column4 {
background-color: #fdd20eff;
position: absolute;
left: 49.98%;
height: 100%;
}
#column5 {
background-color: #603f83ff;
position: absolute;
left: 66.64%;
height: 100%;
}
#column6 {
background-color: #f93822ff;
position: absolute;
left: 83.30%;
height: 100%;
}
#column1:hover {
width: 100%;
z-index: 1000;
}
#column2:hover {
margin-left: -16.66%;
width: 100%;
z-index: 1000;
}
#column3:hover {
margin-left: -33.32%;
width: 100%;
z-index: 1000;
}
#column4:hover {
margin-left: -49.98%;
width: 100%;
z-index: 1000;
}
#column5:hover {
margin-left: -66.64%;
width: 100%;
z-index: 1000;
}
#column6:hover {
margin-left: -83.30%;
width: 100%;
z-index: 1000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Expanding Columns</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="Website Header"></div>
</header>
<section id="categories">
<div class="row">
<div id="column1" class="category">
<h1>Column 1</h1>
</div>
<div id="column2" class="category">
<h1>Column 2</h1>
</div>
<div id="column3" class="category">
<h1>Column 3</h1>
</div>
<div id="column4" class="category">
<h1>Column 4</h1>
</div>
<div id="column5" class="category">
<h1>Column 5</h1>
</div>
<div id="column6" class="category">
<h1>Column 6</h1>
</div>
</div>
</section>
</body>
</html>
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;
}