im trying to make a smooth transition between a display:none; property and then the same property but displayed i guess i almost want it to fade? without the use of JS.
i have written this which hides all of the titles when not hovered over the image:
#title-0
{
display:none;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
}
and i have written this which shows the titles when hovered:
#portfolio-0:hover > #title-0 {display:block;}
but the effect when hovering is just static and instant
i appreciate all the help, thank you!
You can't transition the display property, if I understand correctly what you're trying to achieve, it can be done with opacity:
#title-0
{
opacity: 0;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-webkit-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
#portfolio-0:hover > #title-0 {display:block;}
Here is working example using opacity. Also added a height transition in case desired: http://jsfiddle.net/Ty2nm/1/
#title-0 {
height: 0;
opacity: 0;
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
overflow: hidden;
}
#portfolio-0:hover > #title-0 {
height: 20px;
opacity: 1;
}
You cannot do transition on the display property. You can set the opacity of your #title-0 to 0 instead:
#title-0
{
-o-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
opacity: 0;
}
then revert the opacity to 1 on hover of #portfolio-0:
#portfolio-0:hover > #title-0 {opacity: 1}
Fiddle Demo
Related
This question already has answers here:
Using CSS for a fade-in effect on page load
(4 answers)
Closed 6 years ago.
Can you apply a fade transition to a div on load using CSS only? I have a div, which initially should be transparent and after a few seconds should change to yellow. I know it is possible to do this on state change (e.g. hover). Can anyone help?
Cheers
#content {
background-color: #FF0;
height: 100px; width: 100px;
-webkit-transition: background-color 10000ms linear;
-moz-transition: background-color 10000ms linear;
-o-transition: background-color 10000ms linear;
-ms-transition: background-color 10000ms linear;
transition: background-color 10000ms linear;
}
<div id="content"></div>
#keyframes fadeInAnimation{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
#content {
animation-name: fadeInAnimation;
animation-duration: 500ms;
animation-fill-mode: forwards;
background-color: #FF0;
height: 100px; width: 100px;
-webkit-transition: background-color 10000ms linear;
-moz-transition: background-color 10000ms linear;
-o-transition: background-color 10000ms linear;
-ms-transition: background-color 10000ms linear;
transition: background-color 10000ms linear;
}
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.
So when you rollover the individual areas the code for opacity on these classes.....
.browser .statistic,
.browser .download {
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.
Cheers,
Greg.
sorry if i missunderstanding you.
i just added:
li:hover .browser * {
opacity: 1;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}
DEMO: http://jsfiddle.net/zn09vjbv/1/
UPDATE:
is there any way to get the "h2 span" class to also change its
background position when the li is hover ?
yes, just add this: (add any attribute you like inside this class)
li:hover .browser h2 {
background: #000;
color; #FFF;
......
}
you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover
.initial-element{
opacity:1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
opacity:0;
}
I am trying to allow a object to move down if either the bar or sidebar are hovered. I am trying the following code:
#sidebarcategoryshow:hover#sidebar:hover #sidebarcategoryshow{
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
And basically I want #sidebarcategoryshow to move down if either one is hovered. Yet this does not seem to work, any idea? :( Currently it just is not working like it should.
You would need to use two separate selectors:
#sidebarcategoryshow:hover #sidebarcategoryshow,
#sidebar:hover #sidebarcategoryshow {
margin-top: 200px;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
If you are using LESS, you could use the following:
#sidebarcategoryshow, #sidebar {
&:hover #sidebarcategoryshow {
/* ... */
}
}
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc