Since I am a beginner, I am really struggling with this.
Can you tell me how I can transition the position of the .box when hovering?
I could only display it, but I couldn't transition the position from bottom to top which is what I want to do.
.more {
position: relative;
height: 100px;
}
.box {
display: none;
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s;
}
.more:hover .box {
top: 100px;
display: block;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
Try visibility instead of display. Visibility works a bit better with transitions.
.more {
position: relative;
height: 100px;
}
.box {
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s ease;
visibility: hidden;
}
.more:hover .box {
top: 100px;
display: block;
opacity: 1;
visibility: visible;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
Transition works by interpolating between the old value and then new value. The issue that you're seeing here is technically the old value was never applied in the first place.
Setting .box to display: none was basically saying, "don't render this at all," and transition can't transition between something that doens't exist and another value. Using visibility instead of display fixes the issue since visibility: hidden only hides the element, not removing it completely.
.more {
position: relative;
height: 100px;
}
.box {
visibility: hidden;
position: absolute;
background: white;
border-radius: 4px;
height: 43px;
width: 169px;
top: 50px;
transition: top 5s;
}
.more:hover .box {
top: 100px;
visibility: visible;
}
<div class="col-sm-1 more">
More
<div class="box">
<span>Pages</span>
</div>
</div>
If you want the transition to work in reverse, then you can add another transition delaying the visibility.
Try this :
you can easily change the margin in the box class if you want and the speed in the transition :)
.box {
position:absolute;
top:0;
margin-top:400px;
}
.more:hover .box {
margin-top:0;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Related
I want to achive a simple animation on hover in css, but while hovering off, the animation jumps and makes it look silly. Is there a way to avoid that?
My wish would be that it is colapsing the same way it originaly transformed.
Codepen: https://codepen.io/misah/pen/abzRXvL
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
}
.item:hover::after {
transform: scaleY(2);
transform-origin: bottom;
}
<div class="item">
</div>
This happens because the transform-origin: bottom; is only applied when the item is hovered. When not hovered it falls back to the default - center. Move the rule to the declaration of the ::after.
.item {
width: 20%;
height: 0;
padding-top: 20%;
background-color: blue;
position: relative;
transition: 800ms;
}
.item::after {
position: absolute;
bottom: 0;
height: 30%;
width: 100%;
content: "";
background-color: grey;
transition: transform 800ms ease-in-out;
transform-origin: bottom;
}
.item:hover::after {
transform: scaleY(2);
}
<div class="item"></div>
I'm trying to disable the transition delay by adding a class that put the value of the delay to 0 seconds.
I don't now why it doesn't work.
The only thing that worked for me was to add the .no-anim class transition: none; but than there is no animation at all.
I want to keep the animation also after clicking the button that add the class so the solution with the transition: none; is not good enough in my case...
Any idea?
$('.button').click(function(){
$this = $('.box');
$this.addClass('no-anim');
setTimeout(function() {
$this.removeClass('no-anim');
}, 3000);
});
.box {
width: 200px;
height: 200px;
background: #333;
transition: width .3s ease-in-out;
position: relative;
}
.box:hover {
width: 300px;
transition-delay: 2.5s;
}
.box.no-anim {
transition-delay: .3s;
}
.button {
display: inline-block;
height: 50px;
width: 30px;
background: #ff3434;
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<span class="button"></span>
</div>
The selector .box.no-anim has the same precedence as a plain .box selector (they're both just classes). That means that .box.no-anim's addition of the :hover pseduo-selector is giving it a higher precendence, making it override your no-anim transition-delay.
Add :hover to your .no-anim selector as well and it will work correctly.
$('.button').click(function(){
$this = $('.box');
$this.addClass('no-anim');
setTimeout(function() {
$this.removeClass('no-anim');
}, 3000);
});
.box {
width: 200px;
height: 200px;
background: #333;
transition: width .3s ease-in-out;
position: relative;
}
.box:hover {
width: 300px;
transition-delay: 2.5s;
}
.box.no-anim:hover {
transition-delay: .3s;
}
.button {
display: inline-block;
height: 50px;
width: 30px;
background: #ff3434;
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box">
<span class="button"></span>
</div>
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!
I have an image positioned within a div. When you hover over the div, it displays a caption over the top. The caption div has a background colour that I'd like to fade in. Is this possible? I've tried applying a transition, but it doesn't seem to work for block elements.
Here's the JSFiddle and code:
HTML
<div class="box">
<img src="http://bit.ly/1G1Pcbz" alt="coding">
<div class="overlay">
This is my caption overlay.
</div>
</div>
CSS
img {
height: auto;
max-width: 100%;
}
.box {
position: relative;
display: block;
width: 200px;
height: 117px;
background: #ccc;
transition: all 0.5s ease-in-out;
}
.overlay {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: red;
z-index: 9999;
}
.box:hover .overlay {
display: block;
}
Move the transition property from .box to .overlay, and animate opacity instead of display:
.overlay {
transition: all 0.5s ease-in-out;
opacity: 0;
}
.box:hover .overlay {
opacity: 1;
}
Fiddle
I have found the jQuery function .fadeIn() to be easy to use. Documentation can be found here:
http://api.jquery.com/fadein/
I made this rollover:
jsfiddle.net/DH6Lu/
But as you can see the background image glitches. This is not the case when I don't use the opacity on the main div:
http://jsfiddle.net/6KT9p/
Any idea what is wrong?
<div id="opacity">
<div class="box">
<a class="link" href="#">
<div class="inner">
<img src="http://lorempixel.com/340/192/" width="340" height="192">
<div class="description">
<h3>titel2</h3>
</div>
</div>
</a>
</div>
</div>
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.inner img {
position: absolute;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
}
.inner img:hover {
opacity: 0.15
}
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
.description h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
#opacity {
opacity: 0.5
}
The problem arises from the fixed property of the background.
Set the CSS to
.description {
background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
width: 340px;
height: 192px;
position: absolute;
z-index: -1;
}
and it will work
fiddle
The problem is also linked to the GPU handling this different from the CPU. The GPU is handling the background during the transtion, the CPU in the static states. If you set transform: translateZ(1px) - one of the usual tricks to enable GPU - the background will be permanently in an offset. It solves the glitch, but the look isn't correct.
I guess it glitches because .inner inherits the opacity from #opacity... but I don't know why. Interesting.
Still, I have a workaround for your case, if you want to keep the initial alpha to 0.5: make the .inner half visible, hide the .description unless it's hovered.
The adjacent sibling selector + is useful to show the description when the image is hovered.
Here's what you have to add (existent properties omitted):
.inner img {
-webkit-transition: opacity 0.5s ease;
opacity:0.5;
}
.inner img:hover{
opacity:0.15;
}
.inner img:hover + .description{
opacity:1;
}
.description {
-webkit-transition: opacity 0.5s ease;
opacity:0;
}
Here's a working demo for this.