I want to change the height growth path from top-down to bottom-up. Is it possible in CSS?
.button {
margin-top:200px;
margin-right:34px;
width:150px;
height:45px;
background:black;
float:right;
transition-duration:2s;
}
.buttom:hover{
height:180px;
transition-duration:2s;
}
<div class='button'> </div>
http://jsfiddle.net/yasharshahmiri/1pkemq1p/3/
All you need is to set position: absolute and bottom position like this:
.buttom{
margin-top:200px;
margin-right:34px;
width:150px;
height:45px;
background:black;
float:right;
position:absolute;
bottom: 10px;
transition: height 2s ease-in-out
}
.buttom:hover{
height:180px
}
<div class='buttom'> </div>
Use Rotate and transform-origin to be able to set position relative to the element
.buttom{
margin-top:200px; /* this shall be higher than the height on hover*/
margin-right:34px;
width:150px;
height:45px;
background:black;
transition: height 2s ease-in-out ;
transform: rotatex(180deg);
transform-origin: top;
}
.buttom:hover{
height:180px
}
<div class='buttom'> </div>
Or this way:
.buttom{
width:150px;
height:45px;
background:black;
transition: height .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
transform: rotatex(180deg) translate3d(0, -200px,0);/* the Y-Value shall be higher than the height on hover*/
transform-origin: top;
}
.buttom:hover{
height:180px
}
<div class='buttom'></div>
You can do a smart trick: change margin-top simultaneously with height so that it looks like height is growing from bottom to top:
.buttom:hover {
height: 180px;
margin-top: 65px;
transition-duration: 2s;
}
Final margin-top (65px) is the difference of the starting margin-top (200) and diff of the resulting (180px) and initial (45px) height: 65 = 200 - (180 - 45). In this case block will visually stay fixed while growing up.
Demo: http://jsfiddle.net/1pkemq1p/6/
#PlantTheIdea (nice name) had the answer. It's caveat (absolute positioning) is a pretty big one, depending on your layout, but here's how it works:
.bottom-wrap { position: relative; height: 180px;}
.bottom { position: absolute; bottom:0; width: 100px; height: 20px;
background: #000;
transition: height 0.2s ease-in-out;
}
.bottom:hover { height: 180px; }
<div class="bottom-wrap">
<div class="bottom">
</div>
</div>
You have to set absolute position to the <div>.
.buttom {
width: 150px;
height: 45px;
background: black;
transition-duration: 2s;
position: absolute;
right: 10%;
bottom: 10%;
}
.buttom:hover {
height: 180px;
transition-duration: 2s;
}
<div class='buttom'></div>
Related
I'm having an image within a parent div transition into a blurred state when hovered over. However if the image is 100% width/height of the parent, when blurred you get a bezel of the parent's background color. So I tried making the image say 140% width/height and/or negative left/right/top/bottom without success. This method does get rid of the bezel but not until the very end of the transition, and by this strange clipping effect, which I've gathered has something to the parent container's overflow property, which I need as 'hidden' for my use (see example). Please help me figure out how to get this blur effect without the bezel AND the strange clipping at the end of the transition, and while still undergoing a transition duration. For my application purposes, the image being zoomed in 120% to 140% is actually ideal. Thanks!
div {
position:relative;
width:200px;
height:200px;
overflow:hidden;
margin:auto;
background-color: red;
}
img {
position:absolute;
width:140%;
height:140%;
transition-duration: 1s;
left:-20%;
top:-20%;
}
div:hover img {
-webkit-filter: blur(30px);
filter: blur(30px);
transition-timing-function: ease-out;
}
<div id='container'>
<img src = 'https://i.chzbgr.com/full/9112752128/h94C6655E/'>
</div>
One idea is to duplicate the image and consider a blurred version at the bottom of the one that you will blur on hover. This will reduce the bad effect of seing the background.
#container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
margin: auto;
background-color: red;
}
#container > div {
position:absolute;
width: 140%;
height: 140%;
left: -20%;
top: -20%;
background-size:0;
}
#container > div:before,
#container > div:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
transition:filter 1s;
transition-timing-function: ease-out;
}
#container> div:before,
#container:hover > div:after {
filter: blur(30px);
}
<div id='container'>
<div style="background-image:url(https://i.chzbgr.com/full/9112752128/h94C6655E/)"></div>
</div>
here's my solution. I just changed left & top property of img to 0. Hope this will help you.
div {
position:relative;
width:200px;
height:200px;
overflow:hidden;
margin:auto;
background-color: red;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
img {
position:absolute;
width:100%;
left:0;
top:0;
object-fit: cover;
transition-duration: 1s;
transition-timing-function: ease-out;
}
div:hover img {
-webkit-filter: blur(30px);
filter: blur(30px);
transition-timing-function: ease-out;
}
div:hover {
background-color: white;
transition-timing-function: ease-out;
}
<div id='container'>
<img src = 'https://i.chzbgr.com/full/9112752128/h94C6655E/'>
</div>
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>
Please refer to this jsfiddle: https://jsfiddle.net/b53te5qb/1/
I am attempting to make each of these div widths transition nicely over the other.
Right now it is an instant effect, but I would like for it to transition smoothly. When I attempt the transition it starts to get buggy.
Here is the HTML:
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
And here is the CSS so far:
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: width 0.3s linear;
-webkit-transition: width 0.3s linear;
}
.color:hover {
width: 100%;
position: absolute;
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
}
I am open to restructuring this however I would need to in order to complete the task. I just provided this as a base example.
If you're just doing this with solid colors, I would transition transform: scaleX(). Using transition with transform will give you better performance.
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
transform-origin: 0 0;
}
.color:hover {
transform: scaleX(2);
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
transform-origin: 100% 0;
}
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
Here you go: https://jsfiddle.net/prowseed/b53te5qb/10/
Two techniques, one with flexbox and one with position absolute, pick any :)
.outer {
position: relative;
height: 100px;
width: 666px;
display:flex;
}
.color {
flex: 1;
height: 100%;
transition: .3s;
}
.color:hover {
flex-basis:100%;
}
.outer2 {
margin-top:100px;
position: relative;
height: 100px;
width: 666px;
}
.outer2:hover .color {
width:0;
}
.outer2 .color {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
}
.outer2 .color + .color {
left:auto;
right:0;
}
.outer2 .color:hover {
width:100%;
z-index:2;
}
You'll need to position them absolutely in order to avoid them from moving.
https://jsfiddle.net/b53te5qb/6/
I would highly recommend not transitioning the width, much better would be to transition transform: translateX(), since it will be hardware accelerated and much smoother: https://jsfiddle.net/b53te5qb/8/.
It still needs polishing, but the idea is there. (note the overflow: hidden to avoid showing the excess.) Another improvement would be to have two elements on top (50%/50% width) that trigger the hover via javascript, since when the elements move it's difficult to keep the hover on them, or to remove the hover without leaving the .outer component.
Hope it helps.
Much like this question here (How would I reverse a css transition property width?) I want to reverse the way my transition goes.
Unfortunately it's not working for me! It might be that my code is a little more complex then that. Can anyone lend me a hand?
JSFiddle = http://jsfiddle.net/cPUuL/4/
CSS:
.Imgpad
{
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
position:absolute;
z-index:1;
}
.hidetext {
float:right;
display:none;
margin:0;
padding:0;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
}
.Rightbox
{
width:100px;
height:100px;
background:black;
transition: left 2s, width 2s;
position:absolute;
}
.Rightbox:hover{
width:250px;
}
.Rightbox:hover > .hidetext {
display:block;
}
HTML:
</div>
<div class="content-wrapper">
<div id="Divpos5">
<div class="Rightbox">
<img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye">
<p class="hidetext">Raven Faye<br><font color="#9900CC"></font>~The Sorceress
</div>
</div>
Thanks
-Asteria
Not sure if that's what you were looking for but here's what I did...
http://jsfiddle.net/cPUuL/5/
The css:
.Imgpad {
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
}
.hidetext {
position: absolute;
left: 0px;
top: 0px;
padding: 2px;
margin: 0px;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
background: #000;
height: 96px;
width: 96px;
overflow: hidden;
z-index: -1;
transition: left 0.5s, width 0.5s;
}
.Rightbox {
width: 100px;
height: 100px;
background:black;
position: relative;
}
.Rightbox:hover > .hidetext {
left: 100px;
width: 250px;
transition: left 1s, width 1s;
}
As you can see the transition speed on the .Rightbox:hover > .hidetext; is slower than the one without :hover, It means that the reverse transition will change faster than on .Rightbox:hover > .hidetext. In other words, the reverse transition is when you move your mouse out of the Rightbox.
And the html fixed. You have lots of unclosed tags and the font tag that is clearly useless there.
<div class="Rightbox">
<img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye" />
<p class="hidetext">Raven Faye<br />~The Sorceress</p>
</div>
Here's an updated fiddle that change the right property since if you want to make it move to the left, you'll have to change the right corner.
http://jsfiddle.net/cPUuL/6/
The css changed is:
.Rightbox:hover > .hidetext {
right: 100px;
width: 250px;
transition: left 1s, width 1s;
}
.hidetext {
...
right: 0px; /* instead of left: 0px; */
...
}
I also added a margin to Rightbox so we can see the change.
Using this css you can also make a cool transition:
.Rightbox,
.Imgpad,
.hidetext {
transition: left 1s, width 1s;
}
.Rightbox:hover,
.Rightbox:hover .Imgpad,
.Rightbox:hover .hidetext {
transition: left 0.5s, width 0.5s;
}
.Imgpad {
z-index: 2;
position: absolute;
top: 0px;
right: 0px;
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
}
.hidetext {
position: absolute;
top: 2px;
left: 2px;
right: 102px;
bottom: 2px;
margin: 0px;
color: #CC0000;
font-size:30px;
font-family:"Juice ITC";
overflow: hidden;
z-index: 1;
white-space: nowrap;
}
.Rightbox {
width: 100px;
height: 100px;
background:black;
position: relative;
}
.Rightbox:hover {
width: 404px;
}
I have a Slider with a few images. Inside this slider, i have a div called "sb-bolas", and inside this div, i created new div's where i have a circle, and inside this circle i want to insert some text.
But i need to create more then 1 circle and i want to every circle have the same space between them.
How can i do this?
HTML
<div class="sb-bolas">
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
</div>
CSS
.sb-bolas {
padding: 10px;
bottom: 50px;
left: 100px;
right: 100px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}
.bolas-grad {
width: 100px;
height: 100px;
border-radius: 50px;
opacity: 0.7;
filter: alpha(opacity=40);
background: linear-gradient(to bottom, #007EFF, #09f);
font-size: 12px;
color: #fff;
line-height: 100px;
text-align: center;
}
*UPDATE**
Image
Use float:left; and margin
Keep in mind, using float will remove any absolute positioning you may have established with its parent element. To further help clarify what exactly you need to do, we don't have enough context with the rest of your HTML. Please provide more detailed code if you want a more detailed answer.
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/
HTML:
<div class="slideshow">
<div class="slide" style="background:#C00;">
</div>
<div class="slide" style="background:#0C0;">
</div>
<div class="slide" style="background:#00C;">
</div>
</div>
CSS:
.slideshow {
position:absolute;
top:0;
left:0;
}
div.slide {
float:left; // <------- Here
margin-right:50px; // <------- Here
width: 100px;
height: 100px;
border-radius:50px;
opacity:0.7;
filter:alpha(opacity=40);
background:linear-gradient(to bottom, #007EFF, #09f);
font-size:12px;
color:#fff;
line-height:100px;
text-align:center;
}
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/
Add property
display:inline-block;
to the class .bolas-grad to have the circles in the same row.
To have even spaces add margin to the class .bolas-grad