I have a header than I animate in by adding a class. My issue is that it animates going down, but not back up. Scrolling back up it disappears with no transition.
The HTML:
<header id="masthead-fixed" class="site-header">
header content here
</header>
The JS is triggered on scroll when scrolled past a certain distance.
When past a certain point:
jQuery('#masthead-fixed').addClass("stick");
When above that point:
jQuery('#masthead-fixed').removeClass("stick");
The Sass:
header#masthead-fixed {
position: fixed;
top: -73px;
opacity: 0;
-webkit-transition: opacity 1s ease, top 1s ease;
-moz-transition: opacity 1s ease, top 1s ease;
-ms-transition: opacity 1s ease, top 1s ease;
-o-transition: opacity 1s ease, top 1s ease;
transition: opacity 1s ease, top 1s ease;
&.stick {
opacity: 1;
top: 0;
}
}
Any ideas? Thanks!
Related
So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s 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;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s 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;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s 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;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s 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;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s 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="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!
The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.
Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.
I'm trying to make an image fade when hovering and just normal when not hovering. When I just put my code in a small html file everything seems to work fine. But when I insert my code into a wordpress website, using the Black Studio Tiny MCE plugin, only the fading away seems to work. Does someone maybe have an idea how to solve this?
Thanks,
J.
#test_menu {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
#test_menu:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
<div style="position:relative;width:496.5px;height:124.125px;">
<a href="https://epowerhr.be/hr-software-oplossing-talent/ehrm-performance-management-software/">
<img id="test_menu" src="https://epowerhr.be/wp-content/uploads/2014/10/shutterstock_190964189.jpg" style="position:absolute;left:0;top:0;" />
<p style="z-index:100;position:absolute;color:black;font-size:24px;font-weight:bold;left:50px;top:50px;">
Performance management
</p></a>
</div>
Something like this?
img, img:hover {-webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
img:hover {opacity: 0;}
<img src="http://placehold.it/350x150" />
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 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 {
/* ... */
}
}
I made custom tooltip, and before applying any CSS3 animation I displayed those tooltips using display: none; for hiding it, and display: inline-block; for showing tooltip. This works ok, but now I want to animate opacity of tooltip, so it have nice fade effect. But, I have problems with this, so I need your help. This is what I've tried:
.title div.tooltip{
display: inline-block;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.title:hover div.tooltip{
display: inline-block;
filter: alpha(opacity=50);
opacity: 0.5;
}
and this is markup:
<li class="title">
<div class="tooltip">
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br>
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br>
</div>
</li>
Removing the filter: alpha(opacity=50); and adding the opacity:0; to .title div.tooltip{... worked for me.
The default for the opacity was 1, so the fade-in was going from 1 to 0.5 -- Also, I believe the filter: alpha(opacity=50) was overwriting the opacity transition completely and jumping right to opacity=50. You could also have added transitions for filter
.title:hover div.tooltip{
display: inline-block;
opacity: 0.5;
}
.title div.tooltip{
display: inline-block;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
see updated JsFiddle - includes your complete css found in comments.