I have the following issue. When I set CSS transition with transform (translateZ on hover) strange things start happening. If you just hover over the element it works as expected, but when you start quickly hovering on and off (in quick succession), transform starts breaking and the effect is multiplied (in the case of positive transformZ, the element will move "closer and closer" to you, even though it returns to the specified position few moments after).
Here is the code, HTML:
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
and CSS:
#wrapper {
perspective: 2000px;
}
ul li {
width: 200px;
height: 40px;
background: #0160ad;
transition: all 0.3s linear;
}
ul li:hover {
-webkit-transform: perspective(2000) translateZ(300px);
}
So am I doing something wrong here or it is just the way it is and has to be done some other way to prevent this from happening.
fiddle
When you are transitioning something, it is always a good idea to have the property set in both states. And, as similar as posible (keep unused properties the same).
So, set
ul li {
width: 200px;
height: 40px;
background: #0160ad;
transition: all 0.3s linear;
-webkit-transform: perspective(2000) translateZ(0px);
}
ul li:hover {
-webkit-transform: perspective(2000) translateZ(300px);
}
and it works ok: fiddle
Related
Essentially I'm having an SVG icon fade out and reveal a link on hover but they're huge when I link them and look really bad.
I've tried using 'img' instead of 'a' but failed as they still would be way too big and width and height had no effect.
Also tried manually scaling them down in illustrator but that caused problems when changing the viewport size and they'd miss align themselves.
Fiddled with the problem for a while and as im pretty new to SVG's I ended up giving up and coming here.
It looks like this https://imgur.com/a/4c1KpHF
Hovering over the icons on the left causes them to fade out and the link fade in.
HTML:
<div class="list">
</div>
CSS:
.icon-HOME::before{
content: url(/icons/Home.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child:after {
content: "HOME";
}
.icon-ABOUT::before{
content: url(./icons/About.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a:after {
content: "ABOUT";
}
.icon-WORK::before{
content: url(./icons/Work.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a:after {
content: "WORK";
}
.icon-CONTACT::before{
content: url(./icons/Contact.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a + a:after {
content: "CONTACT";
}
#nav_bar div a:hover:after {
opacity: 1;
}
#nav_bar div a:hover:before {
opacity: 0;
}
Any other additional advice is greatly appreciated!! Thank you in advance to anyone that offers their help!
If your SVGs are local files, you can edit the SVG element attribute to reduce their widths/height.
e.g. <svg width="285" >
If you add just width the height should scale with it.
It wasn't clear if you've tried this only in CSS, but let me know if it works directly editing the SVG attribute.
You can try CSS transform with scale.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
transform: scale(0.5);
or you can try max width too:
https://www.w3schools.com/cssref/pr_dim_max-width.asp
max-width: 150px;
With code below, when tapping the sample element, the sample will go big and then go small, it's nice.
But the question is, when I tap the sample element twice, the effect will only show once.
I know that's because the sample element is still focused, so the animation is not triggered.
I want to solve this with just css, what should I do?
.sample:hover, .sample:focus {
animation: phoneButtonEffect 0.2s linear;
}
#keyframes phoneButtonEffect {
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
That can be achieved with the :active pseudo class.
Take a look at this:
.sample{
height: 10em;
width: 10em;
background-color: red;
transition: all .2s ease-in-out;
}
.sample:active {
transform: scale(1.1);
transition: .1s;
}
<div class="sample">
</div>
The first .2s value is the that the transition will take to be back to normal and the second value .1s in the :active selector, is the time that the .sample element will take the reach the desired state, in this case, scale(1.1).
Hi i'm just a student I just wanna know if its possible to combine hover, transition, and transform by just using css.
How can transformed image transitioned back to it's original size and shape when hovered?
<html>
<style>
.sample {
display: inline-block;
border: 0px solid #fff;
margin: 10px;
overflow: hidden;
height: 500px;
width: 140px;
transform: rotate(0deg);
webkit-transition: 0.8s;
transition: 0.7s;
}
.sample img {
display: block;
transform: rotate(2deg);
transform-origin: 200% -600%;
}
.sample img:hover {
width: 600px;
height: 600px;
transform: rotate(0deg);
transform-origin: 0% 0%;
-webkit-transition-timing-function: ease-in-out;
}
</style>
<body>
<div class="sample">
<img src="http://www.freegreatpicture.com/files/39/1264-tree.jpg" height="600" width="600">
</div>
</body>
</html>
If you only define the CSS "transformed" rules in the hover pseudo-class, then when the image is no longer being hovered-over it will automatically transition back to its original state.
Here is a simplified example using part of your code (I changed the image to the Wikipedia logo since your image was coming up broken):
.sample img {
transform: rotate(30deg);
transition: ease-in-out 700ms;
}
.sample img:hover {
transform: rotate(0deg);
}
<div class="sample">
<img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
</div>
The hover pseudo-class is an "active state class", meaning it only comes into play while that action is taking place (i.e., the pointer is hovered over the element).
If you want to include special easing and timing rules on the change from default state to hovered state then include the transition property in the default rule. You can specify lengths of time over which the transition takes place so the change can be more "animated". You'll notice that in the example above I stretched the rotation to 700ms so you can see it turning when hovered, then turning back when no longer hovered.
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}
I have the html:
<div class="social-section">
<i></i>
<i></i>
</div>
I'd like to have the icon fade to a different color when moused over, using a CSS3 transition. Unfortunately, I'm not sure how to make this work, if it's possible. My current attempt at the css is:
.social-section * i:before { /* Apply this to the i:before, when the a is hovered */
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.social-section a i:before {
color: red;
}
.social-section a:hover i:before {
color: black;
}
In case this is helpful, here's the relevant section of the Glyphicons font css code:
.glyphicons {
display: inline-block;
position: relative;
padding: 0 0 5px 35px;
*display: inline;
*zoom: 1;
}
.glyphicons i:before {
position: absolute;
left: 0;
top: 0;
font: 20px/1em 'Glyphicons';
font-style: normal;
color: red;
}
A pseudo-code, since I'm not sure how it should act based on your quesiton...
put the transition css code you have in the element you want to affect (i.e. not the parent)
#child {
// transitions....
}
then do
#parent:hover #child {
// your changes
}
When the parent element is hovered, make changes to the child. The child's existing transition effects will be used for this, which I think is your goal.
Also, if you're going to be transitioning between icons, you'll need to change the position of the sprite-image, which I assume you're using, not changing the color style.
The answer is that pseudo elements aren't capable of transitions on most versions of most browsers. This issue is so frustrating that Chris Coyier (of css-tricks.com) is keeping a page open on the current status.
As of time of writing, transitions on pseudo elements are supported by:
Firefox 4.0+
Chrome 26+
IE 10+
You can confirm this on your browser.