i'm just wandering if it is possible using only css resize a div without initial height 220px as in example (to have a responsive div).
If I remove the initial height transition stops to work but div is stil resizing. How to keep transtion while removing 220px height condition.
now i'm using:
.resize{
height: 220px;
width:auto;
background: red;
transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-webkit-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
}
.resize:hover{
height: 340px;
}
<div class="resize">
This is resizable div
</div>
If you define a height to its parent element, then you can use percentage heights to give the container a relative height.
for example:
<body>
<div class="foo">
This container will have a relative height
</div>
</body>
CSS:
body{
height: 500px;
}
foo{
height:50%;
}
Related
I want to apply for CSS transition different values on hover in ease-in and ease-out.
Like this,
ease-in: 180ms,
ease-out: 240ms
when I hover it will be 180ms ease-in, but when hovering out it will be 240ms ease-out.
You can use different transition-duration values for the styles affecting your element, for example:
div {
width: 150px;
height: 150px;
background-color: gray;
transition: width 180ms ease-in;
}
div:hover {
width: 300px;
transition-duration: 240ms;
transition-timing-function: ease-out;
}
<div>My Element</div>
For more details please check CSS Transitions
I am experiencing an issue with CSS3 scaling and Safari (v10.0.1).
I have a selection of grid items with the following structure:
<div class="grid-inline col-12 bp1-col-6 bp3-col-3 index-grid-selector index">
<a href="">
<div class="index-grid-item">
<div class="index-grid-dummy"></div>
<img srcset=", 2x" title="" alt="">
</div>
</a>
</div>
CSS (LESS):
.index-grid-selector {
a {
.index-grid-item {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
.index-grid-dummy {
padding-bottom: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
&:hover {
.index-grid-item {
img {
transform: scale(1.2);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
}
The image is positioned absolutely within the grid item container and then scaled on hover.
During the image scaling in Safari, the image enlarges slightly and appears to shift. Gaps (white lines) appear around the image. Once the animation is complete, the image sits correctly, until the hover function is removed.
I have set up a working demo here to showcase the issue.
http://www.testdomainone.co.uk/test.html
I have tried applying the folowing to the image and its parent, but the issue still occurs.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0)
Does anyone know how this can be fixed?
This does not solve your specific issue using an img tag, though since you use fixed size for your images, why not use background-image
Updated with image-set to achieve the equivalent for background images as srcset does for img ... and since it is more or less only iOS Retina which use that high resolution, it will be a decent fallback for browser not supporting it
.index-grid-item {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.index-grid-dummy {
padding-bottom: 100%;
background-size: 100%;
transition: transform 0.25s ease-in-out;
}
.index-grid-item:hover > div {
transform: scale(1.2);
transition: transform 0.25s ease-in-out;
}
<div class="index-grid-item">
<div class="index-grid-dummy" style="background-image: -webkit-image-set( url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg) 1x, url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large_2x.jpg) 2x );
background-image: url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg)"></div>
</div>
Side note, in above sample I use inline style to set the image source in the markup, as one does with the img tag, and of course this could be set in the CSS as well
I'm trying to change div background-color and width on mouse hover. However, can't make it both work, changing bg-color works but changing width in 3 sec does not. CSS code:
div {
background-color:gold;
width:100px;
transition: width 3s ease;
transition: background-color 3s ease;
}
div:hover{
background-color:#f00;
width:200px;
}
Fiddle:https://jsfiddle.net/f61ashbu/
How can I solve this problem?
Use CSS transition:3s ease;
see snippet
div {
background-color:gold;
width:100px;
transition:3s ease;
}
div:hover{
background-color:#f00;
width:200px;
}
<div>
Lorem...
</div>
You have to write multiple transitions as one rule seperated by commas
div {
background-color: gold;
width: 100px;
transition: width 3s ease, background-color 3s ease;
}
div:hover {
background-color: #f00;
width: 200px;
}
<div>
Lorem...
</div>
You can also use transition: all 3s ease, but this will animate other properties used in :hover.
use transition: all;
div {
background-color:gold;
width:100px;
transition: all 3s ease;
}
div:hover{
background-color:#f00;
width:200px;
}
<div>
Lorem...
</div>
You overwrite your first declaration but you want to execute both, so you have to seperate it with ,.
transition: background-color 3s ease, width 3s ease;
Try using all as the [transition-property] as right now you are selecting only the background-color.
transition: all 3s ease;
I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?
HTML:
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
CSS:
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
height: 331px;
}
JSFiddle
One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:
html, body { background-color: #dedede; }
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
margin-top:331px;
}
.show:hover + #appear, #appear:hover {
margin-top:0;
height:331px;
}
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)
Hope this helps! Let me know if you have any questions.
checkout the fiddle https://jsfiddle.net/8paj437a/2/
I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.
And to keep it intact from top. I placed it within a container and give position relative to the container.
HTML
SHOW IT
<div class="container">
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
</div>
CSS
.container {
width: 308px;
height:331px;
position:relative;
}
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position:absolute;
left:0;
bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
height: 331px;
}
By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.
transform: rotate(180deg);
I'm currently making a new theme for my blog and I'm having a problem with the header. See, the header has a fixed position at the top, like a nav bar, and it shrinks when the user scrolls down. However, on some browsers (mainly Chrome, especially for windows), the Twitter icon on the header has a strange flickering behaviour, going down to the next line for 1/10th of a second or so.
I've seen lots of things about flickering bugs in Chrome when using transitions but nothing that looks like this (also, the fixes didn't apply to my situation).
It's a simple transition on the margin of the icons and the height of the header.
Has anyone seen something similar?
Thanks a lot!
EDIT: recreated it in a Fiddle. The problem is still here: http://jsfiddle.net/PVmgz/
HTML `
<header>
<div class="container header">
<div id="logo">Logo</div>
<div class="social">
<div class="search icon">
</div>
<div class="facebook icon">
</div>
<div class="twitter icon">
</div>
</div>
</div>
</header>
<div id="button">Scroll</div>
`
CSS
header {
width: 100%;
height: 98px;
background: #EEE;
position: fixed;
top: 0;
z-index: 9999;
-webkit-transition: height, ease-in, 0.4s;
-moz-transition: height, ease-in, 0.4s;
-ms-transition: height, ease-in, 0.4s;
-o-transition: height, ease-in, 0.4s;
transition: height, ease-in, 0.4s;
}
header.scroll {
height: 60px;
}
header.scroll .header #logo {
width: 350px;
height:50px;
}
header.scroll .header .social {
margin-top: -2px;
}
header.scroll .header .social .icon {
margin-left: 2px;
}
.header {
padding: 5px 10px 0;
}
.header #logo {
width: 400px;
height:82px;
background: #696;
color:white;
float: left;
-webkit-transition: width, ease-in, 0.4s;
-moz-transition: width, ease-in, 0.4s;
-ms-transition: width, ease-in, 0.4s;
-o-transition: width, ease-in, 0.4s;
transition: width, ease-in, 0.4s;
}
.header #logo img {
max-width: 100%;
height: auto;
}
.header .social {
float: right;
margin-top: 19px;
-webkit-transition: margin-top, ease-in, 0.4s;
-moz-transition: margin-top, ease-in, 0.4s;
-ms-transition: margin-top, ease-in, 0.4s;
-o-transition: margin-top, ease-in, 0.4s;
transition: margin-top, ease-in, 0.4s;
}
.header .social .icon {
display: inline-block;
margin-left: 20px;
width: 51px;
height: 51px;
border-radius:999px;
-webkit-transition: margin-left, ease-in, 0.4s;
-moz-transition: margin-left, ease-in, 0.4s;
-ms-transition: margin-left, ease-in, 0.4s;
-o-transition: margin-left, ease-in, 0.4s;
transition: margin-left, ease-in, 0.4s;
}
.header .social .icon.facebook {
position: relative;
background:#336699;
}
.header .social .icon.twitter {
position: relative;
background:#66cccc;
}
So I have a possible explanation for this problem, and some code that definitely fixes it.
The possible explanation is that the shrinking social media icons are being rounded up in size at times. As they're shrinking it might be calculating a width of, say, 26.6 pixels, when of course it must always display as an integer number of pixels. When it rounds that up to 27 pixels, this knocks the last social media icon to the next level.
If this is correct, it flickers because it will continue to shrink, calculating 26 pixels, which is an O.K. value, and it won't drop down. But then it immediately goes to 25.9 pixels, which again drops it down.
If this is indeed correct, it'd actually be a bit more complicated than this simple explanation I'm giving (the width of the parent element comes into play), but this is enough to get the idea across.
Anyway, a fix that works is giving the div that holds the icons a width, so that there's 'breathing room,' if you will, for the icons to expand.
Here's some code that gives it that room, but you'll need to optimize it for it to display as you want it to.
.header .social {
...
width: 500px;
}
My initial idea for a solution would be the set the width of the this div, then float the icons to the right within it.
Kinda late with the answer, but i was just confronting with this issue when transitioning the margin-left value.
The solution is setting the "border-spacing" value to 0