My need is to calculate an image height value dynamically at the hover effect when using transform: translateY( ). As I did at hove I use transform: translateY( -80% ) this -80% value needs to come dynamically from images height according to those individual images & of course, these images heights are different from each other, (in short, all images heights are not the same).
So instead of using this static -80% hard-coded value, want to use variable images height at hover effect to respect those individual images height.
.image {
height : 30rem;
width : 40rem;
overflow : hidden;
}
.image:hover img {
transform : translateY(-80%);
/* this -80% value should be dynamic, base on img height value */
}
img {
width : 100%;
transition: 5s ease;
}
Related
https://codepen.io/fuzzalicious/pen/YzYwozv
.faq-content {
transition: max-height 2s ease-in-out;
overflow: hidden;
}
.dropdown-off {
max-height: 0;
}
.dropdown-on {
max-height: 1000px;
}
I have an animated dropdown that uses max-height, but I can only get it to work with static height, I would like it work with any content so you don't have to know the height in advance.
Now I'm setting max-height to 1000px which means longer lists would be cut off and short ones take long to animate. Is there any way to use something like max-height: auto or calculate the content height?
I was wondering if anyone knows a way to change the content of a pseudo element (:before or :after) within a CSS animation.
It doesn't seem to be working in my fiddle, but maybe there's another way: http://jsfiddle.net/xfrfnav1/
Interesting suggestion, but apparently the browser (Chrome in my case) ignores the content. Makes a little sense. After all, it is for an animation, and the property is 'morphed' from one value to another gradually, which is not possible with content. Still, it would be nice of it worked.
A possible solution: put all the dots in there already and change the width. If you like, you can put the text 'loading' in :before (or in the div itself) and the dots in :after, so you can easily animate it from 0 to any desired width:
div:before {
content:"Loading";
display: inline-block;
overflow: hidden; /* Weird baseline behavior without this */
}
div:after {
content:".......................";
display: inline-block;
overflow: hidden; /* Hide the dots */
-webkit-animation: loading 4s linear 0 infinite;
}
#-webkit-keyframes loading {
0% { width: 0;} /* Only from and to are needed */
100% { width: 3em;}
}
Fiddle
I have a solution for you : here
I have added a fixed width on parent div, and Loading directly in content, your problem was content:""; with no content is hard to show text
My css :
div { width: 61px; }
div:after {
content:"Loading...";
display: block;
overflow: hidden; /* animation gonna reduce content width so points gonna hide */
-webkit-animation:loading 1s linear 0 infinite;
}
#-webkit-keyframes loading { /* be careful you must add -moz and other browser prefixed versions */
0% { width:80% }
25% { width:85% }
50% { width:90% }
100% { width:100% }
}
Works fine (at least in Chrome) if you change to: -webkit-animation:loading 1s infinite linear;
I have an element that needs to scale to be 100% of the parent element. Because the element contains pixel based animations with images that can scale I can't use percentages. Is there anyway to do this using css transform scale?
The relative css transform values are relative to itself (border-box). E.g some absolute centering snippet:
width: 100px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
In Firefox you can try some hack with your parent element:
background-image: -moz-element(#yourElementToScale);
background-size: contain;
But generally its not possible without using percentages on width/height in pure CSS. If you wanna use javascript just scale by the factors:
var scaleX = parentElement.offsetWidth / element.offsetWidth;
var scaleY = parentElement.offsetHeight / element.offsetHeight;
Apply this scale-factors as transform could look like:
transform: scale(scaleX, scaleY);
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.
Using a transition when enlarging an image doesn't seem to work in chrome.
HTML:
<img src="foobar.png">
CSS:
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
What is wrong?
It won't work with percentages it seems. Also, if you wish to transition height as well, you need to declare it in the orignal img styling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/ it works if you specify a width in pixels for the hover.
Edit: If you specify the first width as a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo
You can also use a max-width trick. Set a high max-width amount on the hover and the original image width will be respected by the transition.
http://codepen.io/rustydev/pen/BKOBNZ