Ways to incorporate smooth transitions to content using CSS

Question

Ways to incorporate smooth transitions to content using CSS

I recently created a website for a competition and I am looking to make the text change when a user hovers over a link. While I have managed to achieve the text change, I now want to add a transition to it. I have only used CSS to change the code. Can someone please assist me with this?

Also, I have used the following CSS code:

#link:before 
{
position:fixed;  
left:52%; 
content:"I am feeling lucky"; 
transition:content 1s;
}

#link:hover:before 
{
position:fixed; 
text-decoration:none; 
left:52%; 
color:#666; 
content:"Wrong Decision";
}

Unfortunately, the transition effect is not working as expected. I would appreciate any help with correcting the code.

javascript jquery html css

Answer 1

Answer №1

To modify the content, you can utilize :after and :before in CSS, allowing you to display and hide content upon hover effects.

#link:before,
#link:after{
    position:fixed;
    text-decoration: none;
    left:52%; 
    content:"Feeling adventurous"; 
    transition:content 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
#link:after{
    content:"Regretful choice";
    opacity: 0;
    color:#666;
}
#link:hover:before{opacity: 0;}
#link:hover:after{opacity: 1;}

See DEMO

Answer 2

To modify the content, you can utilize :after and :before in CSS, allowing you to display and hide content upon hover effects.

#link:before,
#link:after{
    position:fixed;
    text-decoration: none;
    left:52%; 
    content:"Feeling adventurous"; 
    transition:content 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
#link:after{
    content:"Regretful choice";
    opacity: 0;
    color:#666;
}
#link:hover:before{opacity: 0;}
#link:hover:after{opacity: 1;}

See DEMO

Ways to incorporate smooth transitions to content using CSS

Answer №1

Similar questions

What is the reason for jQuery scripts not functioning properly when the scripts are placed above the jQuery library?

Unable to prolong jQuery ajax call beyond 4 minutes, despite setting timeout, resulting in net::ERR_EMPTY_RESPONSE error

Vue/Vuex - using async dispatch for AJAX requests in multiple components

Sleek dialog sliding animation with Svelte

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

Issues encountered when implementing JQuery Ajax and PHP $_GET functionality in combination

Is there a way to modify a button's aspect ratio when it is clicked?

MUI: Set the height of the div element to dynamically expand based on its content

Using jQuery to send a post request to a servlet and then refreshing the parent

In the setup function, the composition API calculates the return value of the computed property before it is

javascript execute while load

Limitations of HTML and CSS on Android browsers

Exploring the Variance between 'npm run serve' and 'npm run dev' Commands in Vue.js Development

collection of assurances and the Promise.all() method

Using a global CSS file in Angular can lead to large module bundles being emitted by Webpack

The Express GET route does not support parameters or additional paths

Setting the button value to a textbox and refreshing the status information (Codeigniter)

properties remain unchanged even after the state has been updated

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

Is there a way to trigger a confirmation function for form submission exclusively when clicking one specific submit button, and not the other?