Slide in on hover css

import React from "react"; import "./styles.css"; import < ReactComponent as Burger >from "./burger.svg"; import < ReactComponent as Fries >from "./fries.svg"; export default function App() < const [isShown, setIsShown] = React.useState(false); return ( 
 onMouseLeave= setIsShown(false)> >   
Menu
 
 ) : ( 
 
 )>

1 Answer 1

There are a few things wrong with the App.js and styles.css.

• If you simply want to show or hide elements on hover, it would be much better to do that with CSS ( opacity: 0 and transition to opacity: 1 on hover) as this would help introduce fewer bugs and issues with timing while the component might still be rendering for example. Note that doing this through ReactJS would just show the SVG icon element immediately, without a transition.
• To slide the hidden icon element in, we would then use the positioning properties of the element at different states (normal and hover) with a transition effect applied.

So, I have modified your App.js to:

export default function App() < return ( 
 
 
 
 
Menu
 
 
 
 ); > 

I’ve wrapped each SVG element in a to make it easier to target them in the CSS.

We’ll use absolute positioning, and for this to work, we need to set position: relative on .container .

Next, the transition property needs to be set in the normal state of the icon element alone, not in the normal and hover states.

The element will start from the right-most location of .container so right: 0px . Hidden initially, so opacity: 0 and transition set on all properties. Those values are then changed on .box:hover .

.container < position: relative; . >.box < display: flex; justify-content: flex-end; align-items: center; cursor: pointer; >.first-icon-box < position: absolute; right: 0px; opacity: 0; transition: all 0.55s ease-in-out; >.box:hover .first-icon-box

You may also view this answer in a sandbox here: Sliding CSS Animation on hover in React element.

Источник

Text slide in on hover CSS

Changing the background colour when you hover is optional but adds a really cool effect to the button, as if the new text that slides up is a completely different button alltogether.

First the HTML together for a the button.

And that’s pretty much it, the rest is all CSS.
I’ll stick all the final code here and go through certain parts.

a < color: white; text-decoration:none; text-align: center; display:block; /* important */ >.blue-btn, .first-link < -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; >.blue-btn < height: 64px; font: normal normal 700 1em/4em Arial,sans-serif; overflow: hidden; width: 200px; background-color: #3b5998; >.blue-btn:hover < background-color: #003D99; >.blue-btn a:hover < text-decoration: none; >.first-link < margin-top: 0em; >.blue-btn:hover .first-link

CSS Explained

** Display block ** here is very important as I’ve said in the comment to position the buttons vertically, one above the other.

The ** height and width ** have to be specified. The overflow has to be ** hidden ** so you can’t see the ‘Second Text’ button (look at html). The line height of the font (4em) centers the text vertically in the button, but this might change depending on the height.

CSS3 transitions (notice no -o- prefix since opera now supports webkit). Without this the button will just pop instead of slide. I’m sure you can do this in js but, meh.

Changing the background colour when you hover is optional but adds a really cool effect to the button, as if the new text that slides up is a completely different button alltogether.

Answer by Tommy Reyna

Here is an idea where you can make the element width:0 so it doesn’t affect the other element:,I want the text Along came to slide in when mouse hovers over the wolf. But the position of the wolf should not change. Along came should simply slide in and fade in from the left to complete the sentence., Coworkers treating me differently for being the only one not doing free overtime ,You can also do only the translation in case you want the text to take the space:

.main < text-align:center; >.link < display:inline-block; >.addText < display:inline-block; /* inline-block so we can set a width */ width:0; white-space:nowrap; /* keep text one line */ direction:rtl; /* change direction so the text overflow on the left */ color: rgba(255,255,255,0); transition: .5s; transform: translateX(20px); /* put the value you want here */ pointer-events:none; /* to avoid the hover on the text, remove to see the difference */ >.link:hover .addText

.main < text-align:center; >.link < display:inline-block; >.addText < display:inline-block; /* inline-block so we can set a width */ width:0; white-space:nowrap; /* keep text one line */ direction:rtl; /* change direction so the text overflow on the left */ color: rgba(255,255,255,0); transition: .5s; transform: translateX(20px); /* put the value you want here */ pointer-events:none; /* to avoid the hover on the text, remove to see the difference */ >.link:hover .addText

Answer by James Esparza

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.,Using the text-decoration CSS property can allow for different underline styles to appear in the CSS transition. I created a demo showcasing this using the next technique: the clip-path CSS property.,The direction of the fill effect can be changed by modifying the coordinates. Now that we have an idea for the coordinates, we can make the polygon expand to the right on hover:,We just looked at four different techniques to achieve the same effect. Although each has its pros and cons, you can see that it’s totally possible to slide in a color change on text. It’s a neat little effect that makes links feel a little more interactive.

This technique involves creating knockout text with a hard stop gradient. The markup consists of a single HTML link ( ) element to create a hyperlink:

We can start adding styles to the hyperlink. Using overflow: hidden will clip any content outside of the hyperlink during the hover transition:

We will need to use a linear gradient with a hard stop at 50% to the starting color we want the link to be as well as the color that it will change to:

Let’s use background-clip to clip the gradient and the text value to display the text. We will also use the background-size and background-position properties to have the starting color appear:

Finally, let’s add the transition CSS property and :hover CSS pseudo-class to the hyperlink. To have the link fill from left to right on hover, use the background-position property:

The CSS is similar to the previous technique minus the background CSS properties. The text-decoration property will work here:

To keep the text from wrapping to the next line, white-space: nowrap will be applied. To change the link fill color, set the value for the color CSS property using the ::before pseudo-element and having the width start at 0:

Increase the width to 100% to the ::before pseudo element to complete the text effect on hover:

The markup is the same as the previous technique. We will use a ::before pseudo-element again, but the CSS is different:

Now let’s look into the CSS for the clip-path technique:

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

The direction of the fill effect can be changed by modifying the coordinates. Now that we have an idea for the coordinates, we can make the polygon expand to the right on hover:

The markup for this technique uses a masking method with a element. Since we will be using duplicated content in a separate element, we will use aria-hidden=»true» to improve accessibility — that will hide it from screen readers so the content isn’t read twice:

The CSS for the element contains a transition that will be starting from the left:

To do this, we will use the translateX() CSS function and set it to 0:

Then, we will use the ::before pseudo-element for the , again using the data-content attribute we did before. We’ll set the position by translating it 100% along the x-axis.

Much like the element, the position of the ::before pseudo-element will also be set to translateX(0) :

Answer by Chaim Douglas

Transforming the overlay a fixed length could result in some of the text being clipped. You might resort to Javascript to detect the height of the caption titles and set the transform property accordingly. But we can solve this quite satisfactorily with CSS alone.,First we transform the entire overlay down by 100%:,The difficulty comes in when the part of the overlay that needs to “peek” out over the image before hover is of indeterminate height. That could easily be the case if, say, you have a grid of team members, some of whom might have long names or job titles that wrap onto multiple lines.,Here’s the demo with the complete example:

First we transform the entire overlay down by 100%:

We also transform the caption title – the part that will “peek” over the image – up by 100%. Now it peeks over as we want it to initially. Note, we’re also setting the transition property on both the overlay and the caption title with an equal duration, which will help the transition feel smooth:

We also need to set our hover and focus transition states. For these cards I’m using an absolute-positioned anchor link, to enable the whole card to be hovered. On hover, both the overlay and the caption title are set back to their original position. I’m also including focus styles, to ensure the caption can be toggled for non-mouse users:

.item__overlay a:hover ~ .item__overlay,.item__overlay a:focus ~ .item__overlay,.item__overlay a:hover ~ .item__overlay .item__caption-title,.item__overlay a:focus ~ .item__overlay .item__caption-title

This works pretty well already. But to add a finishing touch and make it feel just a little bit smoother, I like to transition the opacity of the caption body, adding a slight delay so that it only appears once the caption has transitioned most of the way in:

.item__body < opacity: 0; transition: opacity 500ms 100ms;>.item__overlay a:hover ~ .item__overlay .item__body,.item__overlay a:focus ~ .item__overlay .item__body

Answer by Lexi Corona

There are two sides of button, The first one shows always text but when hovering it — It shows another side of button with different text.,This piece of code makes the first text move up when you hover over the button.,Today, I will go through to take a look at how a button hovers animation work, the ones that slide out the text to show another piece of text with CSS. (You can show same or different text).,The animation we will use is a CSS transition property to create a slide down & up effect and it will work when mouse over the button.

The line-height of the font is et 4em but it may change according to height. We also added margin-bottom which you may not want to add it.

We will use the CSS3 transitions (notice no need -o- prefix since opera now supports WebKit). Without transition, the button will just pop instead of slide.

.slideout-anim-wrap, .slide-anim-text

To position the buttons vertically on above other, It is important to add ** Display block **. Added white color for text and make it center.

This piece of code makes the first text move up when you hover over the button.

.slideout-anim-wrap:hover .slide-anim-text

optional but it will add some nice effect to add background color on hover.

Источник