I have a small div without text and when I hover over it, the text appears. When it appears I want a zoom animation to happen. The code I have is working fine on Chrome and Edge but on Firefox the zoom animation is not working, the first time the page loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#keyframes animatezoom{
0%{transform:scale(0);}
100%{transform:scale(1);}
}
.divClass{
background: lightblue;
height: 100px;
width: 100px;
}
.textClass{
display:none;
animation:animatezoom 0.6s;
}
.divClass:hover .textClass{
display:inline-block;
}
</style>
</head>
<body>
<div class="divClass">
<p class="textClass">Text</p>
</div>
</body>
</html>
I'm using Firefox Quantum 58.0.1
Here is a fiddle. (Make sure to click Run/Refresh after doing hover since the lack of animation only happens the first time the code runs)
You have to set animation on hover:
.textClass {
display: none;
}
.divClass:hover .textClass {
animation: animatezoom 0.6s;
display: inline-block;
}
Related
Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
In Chrome 72, Developer Tools show that the button has a height of 18px only. Why?
New Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
background: lightgray;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
Now the button height becomes 32px.
Why is the button height not honoring min-height without a background set?
Browser issue
First of all, I've made a Fiddle right here where you can try with different things/browsers.
button {
height: 32px;
min-height: 32px;
}
This seems to work.
Is it only you?
No, as remarked here by #Michael_B, it seems to be a "browser thing", not only with min-height but with height and more.
So first you have the W3C standards, which are a set of guidelines for browser makers. And then you have the browser makers, who are free to do whatever they want.
If you also try with a Safari browser it stays with the 18px, but not with Firefox.
I don't exactly know why it works for example setting a background and neither could find it, but in my opinion, with height: 32px; //same as min-height is a "cleaner way" of getting through this.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
height: 32px; /*Here you should put the min-height value*/
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
UPDATE 1
If you want to the button to have dynamic height (let's say 100%) to its parent, just do:
div {
height: 10px;
min-height: 32px;
}
button {
height: 100%;
}
If you see, as the button is height: 100%; to the div (its parent), setting min-height to it will work perfectly and your button could dinamically change its height.
You could also go for:
button {
min-height: 32px;
border: 0;
}
Otherwise please tell your specific case for what you want to achieve.
Hope it helped.
I'm trying to use transition on an image. Here is what i'd like it to do. On hover, the image should increase in size to a width of 400 x 400px.
What I don't want it to do when it does transition is:
(1) affect any other element on the page.
(2) hide the image when it exceeds it's original size (where i'm having the overflow:hidden; issue.)
Here is my code taken into another document so I can work on it without looking at all the rest of the code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
#test img {width:358px;
height:298px;
transition: all 1s ease;
overflow: hidden;}
#test:hover img {width: 450px;
height:400px;}
</style>
<div id="test">
<img src="Portfolio/Hair_Salon/images/stylist1.png">
</div>
</body>
</html>
I figured it out as soon as i thought about what i was typing on here...
I needed to add one more identifier #test {width:358px, height:298px; overflow:hidden;}
You should put overflow:hidden, height, and width on #test. Then set your img width 100% to #test
Here's working example
#test {
width : 358px;
height : 298px;
overflow:hidden;
}
#test img {
width : 100%;
height : 100%;
transition: all 1s ease;
}
#test img:hover {
width: 450px;
height:400px;
}
<div id="test">
<img src="http://www.nzhistory.net.nz/files/hero_jean-batten-1934_1.jpg">
</div>
Here's the fiddle https://jsfiddle.net/mc6v6r71/
I have two images with relevant paragraphs underneath them, which show perfectly on pc: ViewSiteHere - however the same page on mobile moves the images underneath each other, making the incorrect info display thereunder.
I have tried making each image only have a width of 49% but that just makes the images smaller and not next to one another
MobileTest
Thank you
According to the flow of the document, the current order of content is:
Image 1
Image 2
Description of image 1
Description of image 2
What you need to do is put "Image-1" and "description of image-1" in a <div> element. This will maintain the relationship between the text and image on mobile
The best approach to the images, both for accessibility that for responsive, would put one under the other. However, if you want you can do that use max-width/max-height and float and at hover the image enlarge.
You can use something similar to this:
body, html {
width: 100%;
height: 100%;
}
#media screen and (max-width: 800px) {
img {
max-width: 50%;
max-height: 50%;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
img:first-child {
float: left;
}
img:hover {
max-width: 100%;
max-height: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TEST IMG</title>
</head>
<body>
<div class="wrap">
<img src="http://www.pepafrica.org/img/1.jpg" alt="">
<img src="http://www.pepafrica.org/img/1.jpg" alt="">
</div>
</body>
</html>
http://output.jsbin.com/fodehu
Basically the title says it all. I have this code:
<html>
<head>
<style>
body
{
-webkit-perspective: 500px;
perspective: 500px;
}
#mydiv
{
transform:rotateY(45deg);
-webkit-transform:rotateY(45deg);
-o-transform:rotateY(45deg);
position:absolute;
left: 50%;
top: 50%;
width:720px;
height:360px;
margin:-180px 0px 0px -360px;
background-color:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="mydiv">
this is my div.
</div>
</body>
</html>
Now this works fine in Chrome and IE. I have problems with this in Firefox. The div is rotated, but not as it is in Chrome and IE. Does anyone know the cause of this, and how to solve the problem? adding -moz-perspective doesn't work either.
Firefox appears to render the line top: 50% differently than the other browsers. The rotation is processed the same way, but since the top line is visible in FF, it looks like a different transform. Removing top:50% from the CSS in my fork of Oriol's fiddle caused the same appearance on FF28, IE11, and Chrome 34.
In Safari 5 adding a reference to a 3D transition breaks my 2D transitions. I am using version 5.1.1 (7534.51.22).
The following code demonstrates:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css" charset="utf-8">
body{ font-family:Arial;font-size:1.5em; line-height:3em; }
.item-a
{
padding-left: 0;
-webkit-transition: padding-left 0.1s ease-out;
}
.item-a:hover {
padding-left: 5px;
}
.item-b > .item-b-fade-in {
opacity: 0;
margin: 20px 0 0 0;
visibility: hidden;
-webkit-transition:opacity 0.4s ease-in-out;
}
.item-b:hover > .item-b-fade-in {
opacity: 1;
margin: 0;
visibility: visible;
}
.three-d-transform {-webkit-transform:translate3d(0,0,0);}
</style>
</head>
<body>
<!--Uncomment the following to break the transitions on this page in Safari 5 -->
<!--<div class="three-d-transform" />-->
<a class="item-a" href="#">
Hover For Transition A (margin change)
</a>
<div class="item-b" href="#">
Hover for transition B (Fade-in)
<div class="item-b-fade-in">
One
Two
</div>
</div>
</body>
</html>
Experimentation leads me to suspect that Safari page rendering is somehow modified if a 3D transform is referenced, causing my issue, but this is speculation.
Has anyone seen this and found a solution?
I have seen this other question, but moving the position attribute per that answer had no effect for me.
I have resolved this issue. In Safari (unlike Chrome, it seems) you need to specify the reciprocal transition. So if you have a transition that occurs when you hover over, you need to specify the transition when you hover off.
If you do not do this, the transition remains "locked" in an incomplete state until another transition on the page is invoked.
As a side note, there are a number of side effects related to z-index and positioning in Safari when using 3D transforms on a page (that lead me down dead ends while investigating this.)