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;
}
Related
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>
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>
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.
You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>
After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}
You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>
If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I have 2 divs, i want to hover the first one to affect both of them, i found out on the forum how to affect the second by hovering the first one, but not both of them.
There is my code:
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}
<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
Thanks for helping me.
you can add red:hover selector to last style declaration
ie you do to hovered red div what you are doing to blue div
.red{
height: 150px;
width: 150px;
background-color: red;
float:left;
margin-right: 20px;
}
.blue{
height: 150px;
width: 150px;
background-color: blue;
float:left;
}
/* added one more selector here */
.red:hover,
.red:hover ~ .blue{
transition: all .2s ease-in-out;
transform: scale(1.1);
}
<html>
<head>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
to apply a rule to more than one selector use a comma between selectors
.red:hover ~ .blue, .red:hover {
transition: all .2s ease-in-out;
transform: scale(1.1);
}
You can always give the same class to the divs that you want to affect.
<html>
<head>
</head>
<body>
<div class="red affect"></div>
<div class="blue affect"></div>
</body>
</html>
.affect {
width: 150px;
height: 150px;
float:left;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.affect:hover {
transition: all .2s ease-in-out;
transform: scale( 1.2 );
}
I have tried with these code. This is HTML code.
<div id="body">
<div id="back_1"></div>
<div id="back_2"></div>
</div>
Now I need to transform back_1 and back_2 divs max width of body div. I use like this. transform:translate(100%), but it is not working. It doesn't transform max width of body div. How can I transform (move whole child dives) that divs ?
I have created 2 DIVs for better understanding.
HTML
<div id="body">
<p>DEMO 1 (Flexible width)</p>
<div id="back_1"></div>
<div id="back_2"></div>
</div>
<div id="body1">
<p>DEMO 2 (fixed width of parent DIV)</p>
<div id="back_11"></div>
<div id="back_21"></div>
</div>
CSS
body{ color: #fff; }
#body {
width: auto;
background: red;
height: auto;
padding: 10px;
}
#back_1, #back_2 {
background: yellow;
width: inherit;
height: 50px;
border: 5px solid #fff;
}
#body1 {
width: 300px;
background: green;
height: auto;
padding: 10px;
margin-top: 10px;
}
#back_11{ margin-bottom: 10px; }
#back_11, #back_21 {
background: grey;
width: inherit;
height: 50px;
}
DEMO: SEE IN ACTION
DEMO1: Added On Hover for #body DIV's first DIV.
As per the clarification from you, it seems that you are trying to move the child divs within the parent upto the edge of the parent.
You started right with the transform: translate(100%).
One problem is that you have to specify which axis you want it to transalte. x-axis in your case and hence it should be translateX.
The other problem is that the 100% in translate is different from the usual percent units in CSS. The CSS percent units are dependent on the parent unit i.e. x% of parent's width/height etc. Whereas, the translate(100%) means 100% of the very element which is being translated.
So, in your case you have to carefully determine the parent width (the .body div) which should be in multiples of child's width. e.g. if parent is 100%, and child is 50%, then translate(100%) will translate the child by another 50% and hence reach the edge of the parent.
This will be more clear by this demo:
Demo: http://jsfiddle.net/abhitalks/Ze9cu/1/
Relevant CSS:
#body {
width: 100%;
height: 200px;
}
#back_2 {
width: 25%;
}
#back_2:hover {
-webkit-transform: translateX(300%);
}
Here, the child is 25% of its parent. So translateX(100%) will move it along the x-axis by only 25%. Making it translateX(300%) will make it move 3 times its own width.
You can use this to get you started as an example:
<style>
#body
{
background: gray;
width: 400px;
}
#back_1, #back_2
{
background: red;
position: relative;
width: 200px;
-moz-transition: .5s;
-webkit-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
cursor: pointer;
}
#back_1:hover, #back_2:hover
{
width: 100%;
}
</style>
<div id="body">
<div id="back_1">Back1</div>
<div id="back_2">Back2</div>
</div>
EDIT::: Using jQuery and jQueryUI
<style>
#body
{
position: relative;
width: 200px;
background: gray;
height: 100px;
max-width: 400px;
}
#back_1
{
position: absolute;
width: 100px;
background: red;
height: 10px;
left: 0px;
}
</style>
<script src="jquery.js"></script> <!-- Your jQuery reference -->
<script src="jqueryUI.js"></script> <!-- Your jQuery UI reference -->
<script>
$(document).ready(function() {
$("#body").mouseover(function() {
var maxWidth = $("#body").css("max-width");
$("#back_1").animate({ left: maxWidth });
});
$("#body").mouseleave(function() {
$("#back_1").animate({ left: 0 });
});
});
</script>
<div id="body">
<div id="back_1"></div>
<div id="back_2"></div>
</div>
Your view study this address
http://www.w3schools.com/cssref/css3_pr_transform.asp
example
<style>
#body{
border:1px solid red;
height:500px;
}
#body div{
background-color: blue;
width: 500px;
height: 40px;
/*General*/
transform:translate(200px, 0px);
/*Firefox*/
-moz-transform:translate(200px, 0px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px, 0px);
/*Chrome, Safari*/
-webkit-transform:translate(200px, 0px);
/*Opera*/
-o-transform:translate(200px, 0px);
border:1px soldi red;
transition:all 0.5s linear;
float:left;
margin:5px;
padding:10px;
}
#body:hover div{
/*General*/
transform:translate(100px, 50px);
/*Firefox*/
-moz-transform:translate(100px, 50px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(100px, 50px);
/*Chrome, Safari*/
-webkit-transform:translate(100px, 50px);
/*Opera*/
-o-transform:translate(100px, 50px);
transition:all 0.5s linear;
margin:80px;
padding:80px;
}
</style>
<body>
<div id="body" >
<div id="back1"></div>
<div id="back2"></div>
</div>
</body>