I have an animation on my site which goes from width: 100px to 800px when hover on.
But when hover out, it just goes to the normal position with no animation.
How could I get it so the animation would go back on hover-out the same way it came on hover?
I only found solutions for transitions, but I need it for animation.
<div id="blackbox"/>
<div id="blacktxt">
Navigation
</div>
See Here
Why not use transitions instead of animations? Working jsFiddle
#blackbox {
background: black;
width: 100px;
height: 80px;
color: white;
text-align: center;
font-family: Times;
font-size: 20px;
position: fixed;
left: 0px;
bottom: 100px;
opacity: 0.5;
margin-bottom: 10px;
transition: all 2s; /* Add this transition */
}
#blackbox:hover { /* Apply the new design on hover */
opacity: 0.8;
width: 800px;
}
#blacktxt {
margin-top: 10px;
height: 60px;
transition: opacity 0.5s, width 5s;
position: absolute;
font-family: cursive;
cursor: default;
}
#blacktxt:hover {
opacity: 0;
}
I wrote the jQuery Reversible plugin for this. Its main advantage over CSS transitions is that it works on IE9 and older browsers.
Related
so I have a div which is a card and content in it. I achieved to make it moves up a bit but the transition property seems to not work.
Here is the HTML code
<div class="card">
<p> Title </p>
</div>
and here is the CSS code
.card:hover {
position: relative;
top: -10px;
transition: 1s;
}
So basically there is multiple cards and it works well every card with the .card class moves up when the mouse is over it, but it moves instantaneously, the transition does not work. Does anyone knows how to fix it? have a great day
This is because you have specified the position and transition only in the :hover block of code, meaning the transition timing is not specified until after the hover has already occurred. In other words, only the item that changes on hover (the top value) should be in the :hover.
Specify the position and transition outside the :hover block, like this for example:
.card {
position: relative;
transition: 1s
}
.card:hover {
top: -10px;
}
You can use transform: translateY
try this
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
border: 1px solid black;
width: 150px;
height: 150px;
cursor: pointer;
transition: all .5s ease-in-out;
}
.box:hover {
transform: translateY(-10px);
}
<div class="box"></div>
Instead of playing with top which requires a positon attribute to move it out of flow, just add a margin to displace the element:
.card:hover {
margin-top: -20px;
margin-bottom: 20px;
transition: 1s;
}
/* for visualization purpose only */
body {
padding-top: 50px;
}
div {
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 10vw;
}
<div class="card">Card</div
I wanted to add a effect where an icon showed up and disappeared smoothly when the button is hovered. The effect occurs with no issues when the button is hovered, but unlike other effects, it only works one way.
Note: I used Ionicons but the issue persists with several other icon libraries.
button {
font-size: 20px;
transition: 0.2s;
overflow: hidden;
}
.buttonicon {
position: relative;
font-size: 25px;
margin-bottom: -6px;
left: 100%;
width: 0;
}
button:hover .buttonicon {
transition: 1s;
left: 0;
width: 20px;
}
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<button>
Button Text
<ion-icon class="buttonicon" name="chevron-forward-outline"></ion-icon>
</button>
It's quite Simple Rather than adding Transition Property on button:hover .buttonicon class apply transition on buttonicon your final output will be look like this.
.buttonicon {
position: relative;
font-size: 25px;
margin-bottom: -6px;
left: 100%;
width: 0;
transition: 1s;
}
button:hover .buttonicon {
left: 0;
width: 20px;
}
Change your css, you can add
transition: 1s
to .buttonicon instead of :hover selector. In this way the transition property will be applied to all transitions regarding the button, so you'll have the "smooth" effect.
My webpage's top looks like this, there is a homepage and a menu toggle that opens up a navigation bar.
Here's the code
<div class="logo">
<img style="margin-left:5%;height:100px;width:130px;vertical-align:middle" src="/download.png" alt="" />
METRO RAIL SYSTEM</div>
.logo {
position: fixed;
top: 1rem;
left: 0%;
z-index: 100;
color: white;
font-size: 2rem;
text-transform: uppercase;
pointer-events: none;
transition: 1s;
width: 100%;
background-color: #333;
}
.menu-toggle {
position: fixed;
z-index: 9999;
right: 5%;
top: 4rem;
width: 5rem;
height: 2rem;
/* background: red; */
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
transition: 0.5s;
}
Now, the fixed in .logo enables me to have title bar(image+text+backcolour) be fixed while I scroll down.
But, when I open the navigation bar, I only want to have my (image+text) there, but as you can see the background colour is also there.
Is there a workaround to do this? I assume I will have to get a background strip rather than colour.
When the menu is toggled, add a CSS class (for eg menu-open) to the logo element and remove the background color using transparent keyword:
.logo.menu-open {
background-color: transparent;
}
How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.
From this state:
To this state:
When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.
div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
div.subject:hover > div.subjectHeader {
height: 30px !important;
line-height: 30px !important;
font-size: 1.5em !important;
text-align: left !important;
padding-left: 10px !important;
}
Here is the jsfiddle: Link to jsfiddle
The text-align property is not animatable, so CSS transitions will not be applied to it.
One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:
<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>
Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:
div.subject .subjectHeaderInner {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
-moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
left: 0;
margin-left: 0;
}
I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/
Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?
Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.
This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.
HTML layout:
<div>
<h1>
<span>Some Title</span>
</h1>
<p>some cool explanation</p>
<p>more explanation</p>
</div>
CSS that delivers the magic:
div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }
JSFiddle example
I am experimenting with using CSS to display genereated content in pseudo-elements.
The hover state does not work correctly. The content generated from the last button appears before the mouse actually hovers over the button if the mouse enters from the bottom. Is there a way to fix this so that the content only appears when the button is hovered over?
Here is a fiddle for the example: http://jsfiddle.net/Ts6qy/
Here is my HTML:
<div class="container">
<span data-title="Number 1">Item 1</span>
<span data-title="Number 2">Item 2</span>
<span data-title="Number 3">Item 3</span>
<span data-title="Number 4">Item 4</span>
</div>
Here is my CSS:
.container {
position: relative;
text-align: center;
padding: 20px 0;
max-width: 420px;
margin: 0 auto;
}
.container span {
display: inline-block;
padding: 2px 6px;
background-color:#78CCD2;
color:#FFFFFF;
border-radius:4px;
margin:3px;
cursor:default;
}
/* Pseudo-elements can even access attributes in their parent elements */
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.container span:hover::before {
opacity: 1;
}
Another approach, to make clearer what is happening:
Add pointer-events: none to the pseudo element:
.container span::before {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
content: attr(data-title);
color: #666666;
font-weight:bold;
text-align: left;
opacity: 0;
/*Animate the transistions */
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: none;
}
And it solves the problem (of course in supporting browsers).
What was happening is that the hover was triggered by the span and also by the pseudo element of the span.
Take a look http://jsfiddle.net/Ts6qy/26/
This width: 100%; has been removed from .container span::before.
So, this way, the before just shows up when hovered it self or when on of those spans is hovered.
I don't know if you really do need what width: 100%; anyway, this method works and you can keep transitions.