I have this code it should scale a link when the mouse is over it
HTML
<a class='subj' href='#'>English 2</a> </br>
CSS
.subj{
text-decoration:none;
transition: 0.5s ease-in-out ;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
}
.subj:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
This code works fine on both chrome and mozilla when the tag is <p> but when it is <a> it's not working on mozilla but it does on chrome
Set the .subj display property to inline-block.
.subj {
text-decoration:none;
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
display: inline-block;
}
Related
So I've been wanting to do this scale transition on an icon on a blog. And the ease-in is working properly but not the ease-out... I read some stuff but none of them are about the scale transition so I've been having a hard time applying it to my case..
Hope you can help me thanks
Here's my code :
#avatar {
margin:auto;
margin-top:15px;
width:50px;
height:50px;
border-radius:60px;
border:0px solid {color:Main icon background};
z-index:10;
}
#avatar img {
width:100%;
height:100%;
border-radius:100%;
}
#avatar img:hover{
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5); /* IE 9 */
-webkit-transform: scale(1.5, 1.5); /* Safari */
transform: scale(1.5, 1.5);
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
Updated the snippet to include
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
To make the ease-out transition effective.
#avatar {
margin: auto;
margin-top: 15px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid {
color: Main icon background
}
;
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5);
/* IE 9 */
-webkit-transform: scale(1.5, 1.5);
/* Safari */
transform: scale(1.5, 1.5);
}
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
So my hover effect works just fine in every browser including IE9+ and it does work in Chrome except hovering on/off the element in certain places can make it skip the animation and snap straight back to the starting positing instead of fading slowly.
This only happens with Chrome, is it a bug, or is there something I can add in my code to smooth things out for Chrome and make sure it always animates back to the default state instead of just jumping to it.
Its using an image with the following class attached to it, the image is also using shape-outside to form text around it so i've included all the CSS code below - the animation slightly rotates and tilts the device picture on hover.
.floatleft {
float:left;
width: 240px;
height: 341px;
-webkit-shape-outside: url(http://url.com/image.png);
-o-shape-outside: url(http://url.com/image.png);
shape-outside: url(http://url.com/image.png);
-webkit-shape-image-threshold: 0.5;
-o-shape-image-threshold: 0.5;
shape-image-threshold: 0.5;
-webkit-shape-margin: 20px;
-o-shape-margin: 20px;
shape-margin: 20px;
margin:20px;
display:inline-block;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out;
transition-timing-function: linear;
}
.floatleft:hover, .floatleft:active
{
-webkit-transform:rotateX(-13deg) rotate(-5deg);
transform:rotateX(-13deg) rotate(-5deg);
-o-transform:rotateX(-13deg) rotate(-5deg);
-moz-transform:rotateX(-13deg) rotate(-5deg);
-ms-transform:rotateX(-13deg) rotate(-5deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
Heres the Fiddle - http://jsfiddle.net/d5wnnqfd/
i'm developing a website, and i have a bug as seen in this fiddle.
My footer, on hover, should go up, and on "mouse-out" should go back to his place, but if i go out, and place the mouse where it went after going up, the footer automatically goes up without the smooth effect ...
I can't explain this in other easier way, so if someone understands and knows how to help, i really appreciate!
Here is the same code:
html, body{
height: 100%;
}
.x{
width:100%;
min-height: 100%;
background-color: #000;
color: #FFF;
}
.y{
background-color: #ABC;
width: 100%;
text-align: left;
position: fixed;
bottom:-50px;
height: 100px;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-ms-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
.y:hover{
-webkit-transition: ease;
-moz-transition: ease;
-ms-transition: ease;
-o-transition: ease;
transition: ease;
-webkit-transform: translate(0px,-100px);
-moz-transform: translate(0px,-100px);
-ms-transform: translate(0px,-100px);
-o-transform: translate(0px,-100px);
transform: translate(0px,-100px);
}
<body>
<div class="x"> x
</div>
<div class="y"> y
</div>
</body>
You need to add a timing value for the transition on hover
transition: 0.5s ease;
See updated fiddle;
I have an issue , I have the following code I am using for increasing the scale using CSS3 transition , at the end it snaps back to its original scale after increasing.
CSS:
.big{
transition:all 0.3s ease-in-out;
display:inline;
}
.big:hover{
-webkit-transform:scale(1.4);
}
HTML :
<h1 class = "big">Typo</h1>
Try using inline-block instead of inline (also, it's recommended to add compatibility to the rest of the browsers as well).
CSS:
.big {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
}
.big:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
HTML:
<h1 class="big">Typo</h1>
Test it here: http://jsfiddle.net/XbUC8/