I have this problem in my really easy css file, that I want to transform a div from 75px in height and width with :hover, but it seems to only change the width.
#ich{
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition: 2s; /* Safari and Chrome */
-o-transition: 2s; /* Opera */
margin-top:40%;
width:75px;
height:75px;
border-radius:35px;
background-image:url(fb.jpg) ;
background-repeat: no-repeat;
background-position: center;
text-align:center;
display:block;
}
#ich:hover{
width:300px!important;
height:300x!important;
background-size: 300px 300px;
}
The HTML is just a div with id #ich in the body part, nothing else.
height:300px!important;
you just put "300x" instead of "300px"
Related
I have a mobile menu that slides to the left from off the screen to the right. It works very well using the below code. However, when it's off the screen, I can actually scroll my mobile view over to the right and see it off the screen rather than not be shown at all, and the mobile screen width staying put. How do I fix this issue?
.mobile-menu {
width:200px;
border:1px solid #eee;
background-color:#f2f2f2;
height:285px;
position:absolute;
top:35px;
right:-200px;
z-index:99999;
display:none;
-webkit-transition: right 0.1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: right 0.1s ease-out; /* Firefox 4-15 */
-o-transition: right 0.1s ease-out; /* Opera 10.50–12.00 */
transition: right 0.1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.mobile-on-screen {
right:0 !important;
display:block;
}
I can't see your full code, however, I would guess that what is probably missing is an overflow: hidden; on the parent div, or body.
For closed state of menu
body {
overflow-x: hidden;
}
And for open state of menu toggle a class on body
body.menu-open {
overflow: hidden
}
Demo: [http://everythinghomegrown.com/] (look at the Customize Your Own section with the four batman images)
For some reason, the background-size is not transitioning. Instead it jumps from one size to the other without a smooth transition.
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
Why is the transition not working? I’m experiencing this in Chrome, Safari, and Firefox.
Solved.
Originally I had this:
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
I fixed the problem by adding a second value to the background-size property.
div {
background-size: 100% 100%; /* added second 100% to fix the problem */
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
Image out of box. It seems that is not the right think I do. If anyone can help I would be glad.
Thank You!
Here You can find Demo
.box {
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;
}
img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.box:hover img{
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
It's seems the problem is only on webkit browsers. I make some research after catch that border-radius property crash the scale transition and I found this
overflow:hidden ignored with border-radius and CSS transforms (webkit only)
You have to put -webkit-mask-image: to the parent div to fix that.
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
http://jsfiddle.net/Jx8xF/16/
Edit: And have you attention, that background-size is expensive operation - see this article on Fix 4. Remove background-size CSS property if it slows down your website
http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
And finally you can see that zoomin the image is more smooth with scale() css transition method than background-size
EDIT2: code update on http://jsfiddle.net/Jx8xF/19/
Tested on Safari 5.1.7, Chrome, Mozilla, IE10, Opera, Opera Next
As you can see the Safari browser is only who have problems after first fix. For him you need to set
-webkit-transform: translateZ(0);
And that is not all. You need to group two layers for the border bug, and wrap it with another div. In code you can see the complete fix in HTML and CSS file.
This effect can be better achieved by removing the img element, and instead using the image as a background on the .box element. Then you use transition on the background-size property.
Here is a working example on CodePen. Example code below.
.box {
-webkit-transition: all 0.4s ease;
width:210px;
height:210px;
border-radius:100%;
border:3px solid yellow;
background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
background-size: 100%;
}
.box:hover{
-webkit-transition: all 0.4s ease;
background-size: 150%;
}
I have collection of images in a simple gallery that I want to transform from small to large smoothly on mouseover.
I am currently doing this by revealing the actual size of an image when the mouse is over but forcing it to a certain size when it is not and hiding the real size with display:none.
I want to include some webkit transformations to do this over a 1s period to improve the transitions. I understand webkit is to transform an element between two states however is there anyway I can make this happen.
I also want to avoid JavaScript.
.reveal a .preview
{
display: none;
}
.reveal a:hover .preview
{
display: block;
position: absolute;
z-index: 1;
}
.reveal img
{
background: #fff
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.reveal li
{
background: #eee;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.reveal .preview
{
border-color: #000;
width: auto;
height: auto;
}
without the html (ie jsfiddle) it's hard for me to insert the solution within your code.. but here is a generic solution http://jsfiddle.net/9QVae/2/
img
{
width:100px;
height:100px;
background:red;
transition:width 1s, height 1s;
-moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}
on hover:
img:hover
{
width:200px;
height:200px;
}
so the trick is to specify the css property you want to add an effect to (ie width)
then specify the duration of the event ie transition:width 1s; then you specify the final dimension under the :hover selector
note: transition does not work on IE
I am trying to realise a nice Hover Off effect using CSS. There is a pretty good example here, but I can't reproduce this with the properties background-size and font-size.
The effect is simply to zoom in the image and the text on mouse over and come back to the original state on hover off but in a clean way (using -webkit-transition). This code fails:
.nice a {
background: url(../my_image.png) no-repeat;
background-size: 40px 37px;
font-size: 12px;
/* HOVER OFF */
-webkit-transition: background-size 2s;
-webkit-transition: font-size 2s;
}
.nice a:hover{
background: url(../my_image.png) no-repeat ;
background-size: 43px 39px;
font-size: 13px;
/* HOVER ON */
-webkit-transition: background-size 2s;
-webkit-transition: font-size 2s;
}
Any ideas?
I think the problem, with the code you provided, is there aren't enough 'steps' or 'keyframes' for the animation to run smoothly.
See this demo: http://dabblet.com/gist/3763579.
The box using your properties[one on the right], has 2 seconds on the clock to animate just one or two pixels, so there'd be an apparent delay before the artifacts jump to the next pixel. Same with animating back to place, hence the choppy, un-smooth transition.
You can use transform:scale(value);
Test it
.nice a {
font-size: 12px;
display:block;
-webkit-transition:all 2s ease;
-webkit-transform-origin:top left;
}
.nice a:hover {
-webkit-transform:scale(1.3);
}
Here is working Demo
and the tutorial to know more about background
This is another way to do it with transforms.
.nice a { -webkit-transition: font-size .2s ease-in-out; }
.nice a:hover { -webkit-transform: scale(1.1); }
example with key frames(drawback is not all the time hover, it won't stay).
#-webkit-keyframes scalar{
from{
background-size: 40px 37px;
font-size: 22px;
}
to{
background-size: 103px 79px;
font-size: 32px;
}
}
.nice2 a{
background: skyblue;
background-image:url("http://lorempixel.com/300/200/abstract");
background-repeat:no-repeat;
background-size: 40px 37px;
font-size: 22px;
color:white;
}
.nice2 a:hover{
-webkit-animation: scalar 1s;
}
upadated demo with keyframes
we have seen Three ways to do it. lets decide which best for it.
Transitions which gives smooth and nice appearance.
Transforms which blurs while growing content.
Keyframes which leads to high end but...
Choice is yours!
My bad, this works:
/* HOVER OFF */
-webkit-transition-property: background-size, font-size;
o-transition-property: background-size, font-size;
-moz-transition-property: background-size, font-size;
transition-property: background-size, font-size;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;