This pretty simple JSFiddle (http://jsfiddle.net/AndyMP/sj2Kn/) changes the background colour of a block on 'hover', but how do I get it to fadein/fadeout?
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.block:hover {
background-color: #333;
}
You need to use transition property
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
-webkit-transition: background .5s; /* For webkits */
transition: background .5s;
}
Demo
The property is simple, the first parameter you pass is the property you want to animate, so say you want to animate the height you can pass the height or you can use all as the value if you want to transit all the properties which are transitional, and the next parameter is the time we set for the transition, you can set as 1s, 2s and so on where S stands for seconds.
It's worth noting that the property am using is a short hand property for the following properties
transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease
Where in the above example we are using the transition-property and transition-duration, default values are used for other properties.
Demo Fiddle
Add transition:background 200ms ease-in; to .block
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition:background 200ms ease-in;
}
Where 200ms is the amount of time you wish the fade to take.
The CSS property transition defines you want an animation to take place, the three following parts are the specific property you want to transition (can be set to all), the speed, and the animation timing function.
More on CSS transitions from MDN
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
JSFIDDLE
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
.block:hover {
background-color: #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
Related
I want to apply for CSS transition different values on hover in ease-in and ease-out.
Like this,
ease-in: 180ms,
ease-out: 240ms
when I hover it will be 180ms ease-in, but when hovering out it will be 240ms ease-out.
You can use different transition-duration values for the styles affecting your element, for example:
div {
width: 150px;
height: 150px;
background-color: gray;
transition: width 180ms ease-in;
}
div:hover {
width: 300px;
transition-duration: 240ms;
transition-timing-function: ease-out;
}
<div>My Element</div>
For more details please check CSS Transitions
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary