I want to create an animation for the text that has the class ".popUpWord". When hovering over it, I would like the color of the text to change gradually from left to right.
<span class="popUpWord">hello</span>
What I'm aiming for is a similar effect to this - Animate text fill from left to right, but instead of repeating, I want the filling to stop once completed.
Do you think this can be achieved through CSS?
Include an outer div and apply mix-blend-mode: multiply; on :hover
.popUpWord {
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
background: black;
display: table;
color: white;
}
.outPop:hover {
margin: auto;
background: linear-gradient( crimson , crimson) white no-repeat 0 0;
background-size: 0 100%;
animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
mix-blend-mode: multiply;
}
@keyframes stripes {
to {
background-size:100% 100%;
}
}
body {
float:left;
height: 100%;
background: black;
}<div class="outPop">
<div class="popUpWord">
Text
</div>
</div>After stumbling upon this solution years after it was originally posted, I realized that the accepted answer didn't quite work for me when dealing with different background colors. Experimenting with a dark grey background led to an unwanted dark box behind the text.
Determined to find a better solution, I came across this alternative method. Essentially, it involves having two identical instances of the text positioned on top of each other. The text's position is determined using css-grid's justify-content: start, and an overflow:hidden property set with a width of 0.
Upon hovering over the text, the width of the fill-text div expands, effectively revealing the overlay text from left to right. To prevent any jumping or wrapping of text during expansion, an additional div surrounds the overlay text, extending its width to accommodate the expanding div.
.wrapper {
position: relative;
width: 400px;
font-family: 'Arial', sans-serif;
font-size: 24px;
background: beige
}
.fill-wrapper {
width: 300px;
}
.fill-text {
display: grid;
justify-content: start;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
word-break: keep-all;
width: 0;
color: red;
transition: 0.5s width ease-in-out;
}
.text {
width: 150px;
color: black;
}
.wrapper:hover .fill-text {
width: 150px;
transition: 0.5s width ease-in-out;
}<div class="wrapper">
<div class="fill-text">
<div class="fill-wrapper">
My Text
</div>
</div>
<div class="text">
My Text
</div>
</div>The latest innovation we can employ is the use of background-clip:text. To begin, we need to make our color transparent so that our background color shines through. Then, create a gradient background with two colors at 50% each - the first being the transition color and the second the base. Adjust the background-size to 200% and set the background-position to 100% which will reveal only the second color. Finish off by adding a hover effect using background-position:0;
h1{
color: transparent;
background-image: linear-gradient(90deg, yellow 50%, green 50%);
background-position:100%;
background-size:200% 100%;
background-clip:text;
-webkit-background-clip:text;
transition: background-position 1s ease;
}
h1:hover{
background-position:0;
}<h1>Some text</h1>Uncover the magic behind adjusting the background position.
Is there a way to make this component appear on button click with a smooth ease-in expand or popout animation? I'd like the transition to be smoother rather than it just appearing suddenly. const CardExample = () => { const [show, setShow] = use ...
Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...
I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...
I have a webpage with HTML and JavaScript that successfully hides and displays a flash movie object. However, I encounter a problem when trying to exit from the tab - the browser crashes without any error message. Can anyone provide assistance? Thank you. ...
Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and ...
I am facing an issue with screen resizing. The code below appears fine on a full screen, but as soon as I resize the window even a tiny bit, it starts to look distorted and unattractive. I have gone through the Bootstrap 4 grid layout tutorial, but it is n ...
I am facing an issue with three map canvases on different divs. Despite setting the center to the same position in all three of them using JavaScript, the second and third maps do not seem to reflect that center. Does anyone have any insights on what cou ...
If I have an element on my website with a relative position, and within that element I want another element with a fixed position. The Issue: In various browsers (FF, IE, Opera) and in earlier versions of Chrome (tested on Chrome version 26.0.1410), the ...
Looking for help on implementing a Javascript function that can modify the color schemes and background on all pages of my website. I tried using a function but it's only affecting one page. Can anyone offer guidance or suggestions? I'm finding t ...
In my class, I have defined the following state properties: state = { step: 1, clientName: '', icecreamFlavors: { vanilla: false, chocolate: false, mintChocolateChip: false }, toppings: { sprinkles: fal ...
Despite hours of research and following various links, I am still experiencing a problem where my page continues to load after logging out and clicking the back button. Below is the code I have tried for my log out page: protected void Page_Load(object se ...
I'm currently facing an issue at work where there is a repetitive button and value based on the database. I need to extract the selected value from the current page into a pop-up page whenever the corresponding button is clicked throughout the repetit ...
Greetings, StackOverflow community! I'm currently working on an Angular + Node app and I've run into a major problem related to forms and validators in Material Angular. Right now, I'm facing an issue where the HTML component is not recogn ...
Is there a way to efficiently apply multiple Twitter Bootstrap 4.5 classes to various td tags without repetition or using jQuery? I am looking to streamline the code in order to reduce the amount of data within the HTML document. For example, if there are ...
I have implemented two Bootstrap 3 navigation menus on a single page. One menu works fine when the toggle button is activated for responsiveness, but the other one doesn't work as expected. How can I resolve this issue? Below are the code snippets fo ...
I'm a bit confused by this situation. I've posted it on CodePen. Essentially, I'm utilizing block-inline to create a centrally aligned grid of square divs that wrap if the screen is too small. .outer{ width: 100%; text-align: center ...
Visit the live version of this at . When prompted for a formId, input BroadRunTrack2013. Follow by adding an item to cart and entering player name information (you can use random data for now). Select the Runner's Hat, choose color/size, specify quant ...
Does anyone know how to position a figcaption at the bottom of an img so that it appears on top of the image with a transparent background? I've been having trouble making them the same width and getting the figcaption to sit on top of the image. Whe ...
Just delved into the world of node / express and decided to test my skills by creating a simple tip calculator app. However, I seem to have hit a roadblock with loading my CSS. The console keeps throwing this error: "Refused to apply style from &apos ...
Whenever the delete button of a specific row is clicked, I need to retrieve the id of that row from the database. Once I have obtained the id, it needs to be sent to the controller to carry out the deletion of that row. I attempted to approach this issue ...