Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when the mouse is moved away.
I'm not familiar with Haml and SASS, so I need help implementing this effect using HTML and CSS.
To access the content, you need to compile the source code,
Below is a compiled version of your source:
@import url("https://fonts.googleapis.com/css?family=Roboto:900");
body {
background: #111;
}
a {
font-family: "Roboto", sans-serif;
font-weight: 900;
color: black;
text-decoration: none;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.h-button {
background: white;
padding: 20px;
width: 250px;
text-align: center;
}
.h-button span {
display: inline-block;
min-width: 0.3em;
text-transform: uppercase;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity: 0;
transform: translate(0, -20px);
}
.h-button:before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
text-transform: uppercase;
letter-spacing: 3.5px;
opacity: 1;
transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
opacity: 0;
transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
opacity: 1;
transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
transition-delay: 0.15s;
}<a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
<span>T</span>
<span>h</span>
<span>a</span>
<span>n</span>
<span>k</span>
<span>s</span>
</a>Whenever a user inputs a value in the textbox, it should dynamically display on the screen. I have successfully implemented this feature once, but I am encountering difficulties with implementing it for a second input. Your help is greatly appreciated. fu ...
Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely. I've tried placing the clearTimeout functions before e ...
Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...
Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...
Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...
Welcome to my HTML table <!DOCTYPE html> <html> <body> <table> <thead> <th>Title1</th> <th>Title2</th> </thead> <tbody> <tr> <td><input type="checkbox" id=0 /></td> ...
Is there a way to hide the "Subject" if the "subject_title" field is empty? <dt class="col-sm-6 text-dark" >Subject</dt> <dd class="col-sm-6">{{$course_dtl->subject_title }}</dd> For example, I would li ...
Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...
I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...
I am looking to create a small white space between two text boxes. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row col-lg-12 col-sm-12"> <div class ...
I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...
Hello there! I have been working on a feature where I need users to select a color and have that choice reflected in the value field. Initially, I assumed this could be achieved easily through Bootstrap's features since my project is based on Bootstr ...
Currently, I am working on creating a video gallery for a friend and I am experimenting with changing the thumbnail opacity using jQuery fade effect. While I can achieve this with CSS, I want to implement it with jQuery for a smoother transition. If you ...
It's driving me crazy. The code snippet below works perfectly, but not in my project. Only the code in the resize() function seems to work. When I resize the window, everything functions as expected - I can add and remove the 'open' class by ...
As a beginner in the world of JavaScript, I set out to embark on a project involving turning on a connected LED on an Arduino board by simply pressing a button on an HTML page. After doing some research, I came across a JavaScript library called "johnny- ...
My website layout is giving me trouble. I want to create a three column design, but unfortunately, it's not aligning properly. Each subsequent column is being pushed down slightly more than the previous one. Is there any way to fix this issue? Interes ...
I have a query regarding the loading order of scripts in web browsers. I am interested in knowing the most efficient way to redirect users to a mobile website on the client side. For example, if I place a mobile detection script within the <head> se ...
The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...
My website has an index file with all the necessary meta tags, stylesheets, and scripts: <!DOCTYPE html> <html lang="en"> <head> <!-- Required Meta --> <meta charset="UTF-8"> <meta http-equi ...
I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...