I have an icon inside a div that I would like to fade in over x time, and fade out faster.
What I am trying to achieve is something like: transition: opacity 1s ease-in .1s ease-out;
So when I hover over project, bottom-icons should only ease-in the opacity to 1, but on offhover, it should return to opacity: 0 instantly.
What I have is:
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .5s ease-in;
//other stuff
}
I am trying to do this avoiding jQuery.
You can apply your transition on hover, like so:
.project {
position: relative;
&:hover {
.bottom-icons {
transition: opacity 1s ease-in;
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .1s ease-out;
//other stuff
}
https://jsfiddle.net/8x184o6x/
It can be done pretty easily.
.project .bottom-icons {
transition: opacity 0.5s ease-out; /* leaving effect */
}
.project:hover .bottom-icons {
transition: opacity 1s ease-out; /* entering effect */
}
(Sorry that code is in pure CSS but I find it more universal.)
Transitions can be different for normal state and :hover state, and this is what we’re using here.
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
transition: opacity .5s ease-out;
}
}
.bottom-icons {
transition: opacity 2s ease-out;
//other stuff
}
Just set the icons to easy out of their normal state, and ease out of their hover state differently.
.project {
position: relative;
background: #eee;
text-align: center;
padding: 30px;}
.bottom-icons {
display: block;
background: #ddd;
padding: 5px;
opacity: 1 ;
transition: opacity .5s ease-out;
}
.project:hover .bottom-icons {
opacity: 0;
transition: opacity 2s ease-out;
}
<div class="project">
<div class="bottom-icons">
xxxxx
</div>
</div>
According to your explanation, you can use the following things:
ADD transition to the hover,
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
opacity : 1;
-moz-transition: opacity .25s ease-in-out;
}
div:hover {
opacity: .1;
-moz-transition:2s;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>
</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Related
I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
Am trying to define css style in which when hover an element the opacity should change from 0 to 1.after a few seconds if unhover doesnt occur opacity should change its value to 0.
.selection:hover .player-icon {
opacity: 1;
transition-duration: 3s;
-moz-transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;*/
}
.player-icon {
margin-left: 45%;
margin-top: 21%;
z-index: 999;
position: absolute;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
Use keyframe animation.
#keyframes show-hide {
0% { color: red; }
10% { color: white; }
90% { color: white;}
100% { color: red; }
}
.player-icon {
display: inline-block;
padding: 1em;
color: red;
background-color: red;
}
.player-icon:hover {
animation: show-hide 3s linear;
}
Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>
I expected this to transition when entering and leaving the dimmed state but it only transitions when leaving. How can I make the transition work when entering it? I also tried ease-in and ease-out but these don't seem to make a difference.
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
opacity: .5;
transition: opacity .5s ease-in-out;
}
Live example of problem http://codepen.io/ryanve/pen/doKdgW
Because you need to define the transition on .card:
.card {
transition: opacity .5s ease-in-out;
}
Instead on:
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
transition: opacity .5s ease-in-out;
}
Change you css to this:
.is-dimmed-unless-active {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.is-dimmed-unless-active:hover {
opacity: .5;
}
.card {
width: 60%;
margin: 1em auto;
padding: 1em;
color: crimson;
border: 3px dotted crimson;
}
body {
font-family: sans-serif;
background: white;
}
I have a <div> element which has a background image. On top of that I have some text that is hidden but when the user hovers over the <div> element that text will show and the <div> opacity will lower. My problem is when you hover over the div all elements inside that change opacity as well. I have looked through stackoverflow to see if anyone has the same problem but all i found were answers that had RGBA using background colors (not images).
Here is my css:
.pic{
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.textstuff{
visibility:hidden;
}
.pic:hover .textstuff{
visibility:visible;
color:black;
}
.pic:hover{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
HTML HERE:
<div class="pic" style="height:150px;width:150px;">
<div class="textstuff">this is text</div>
</div>
Anytime you change the opacity of a parent element, it automatically applies to all children. The only way to get around this is to not have your opacified element be the parent of the text. It'd probably be best to refactor the background element as a sibling of any other elements in that container and just give it some absolute positioning.
Try with :before pseudo-element:
.pic {
position: relative;
}
.pic:before {
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
position: absolute;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
.textstuff{
visibility:hidden;
}
.pic:hover .textstuff{
visibility:visible;
color:black;
}
.pic:hover:before{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
I was able to get this working by wrapping it and setting the .pic to position absolute. This way it fills up the background but doesn't affect the text:
<div class="wrapper">
<div class="pic"></div>
<div class="textstuff">
<p>This is the textstuff</p>
</div>
</div>
CSS code:
.wrapper {
position: relative;
}
.pic {
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.textstuff {
visibility:hidden;
}
.pic:hover ~ .textstuff {
visibility:visible;
color:black;
}
.pic:hover {
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Here is a fiddle showing an example:
http://jsfiddle.net/jqxw5ajz/
Any element within the .pic class would receive the opacity, in order for it not to receive it you have to create a wrapper for the pic and put the .textstuff in that wrapper sibling to the .pic
<div class="pic_wrapper">
<div class="pic"></div>
<div class="textstuff"></div>
</div>
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/