Struggling to activate the link:hover transformation

At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected.

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:hover{
                font-size:45px;
                -webkit-transform:rotate(5deg);
            }
        </style>
    </head>
    <body>
        <a href="http://davidwalsh.name/css-transformations" target="_blank">text</a>

    </body>
</html>

Although the link changes its font size when hovered over, it doesn't rotate as intended. I've tried using -webkit-transform in Google Chrome, but no luck.

You can see what I'm attempting to achieve in this example: http://davidwalsh.name/demo/cpojer-links.php

I also attempted this:

a:link:hover{
         font-size:45px;
         -webkit-transform:rotate(5deg);
        }

but unfortunately, that didn't work either.

I did manage to make it "work" by enclosing the link in an 'li' and using li:hover, but that's not the desired outcome.

Any thoughts or suggestions?

Answer №1

When working with CSS transformations, remember that an inline element cannot be transformed directly. In order to apply a transformation, you will need to change the display property to either block or inline-block.

According to the CSS box model, elements are classified as block-level, atomic inline-level, table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

For more information on this topic, visit: w3c

Answer №2

Don't forget to include the transition duration and consider adding support for other browsers too. I managed to tweak the code to achieve the desired outcome.

a:hover{
    font-size:45px;
    -webkit-transform:rotate(5deg);
    -webkit-transition-duration:1s;
}

Check out this link for a functional version of your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another

I am attempting to conduct a test that requires displaying the number of attempts (each time the button is pressed) alongside the percentage of successful attempts, updating each time the button is clicked. However, I've encountered an issue where onl ...

How to make external links open in a new window within wagtail

Recently, I made a change to include target="_blank" in external links by implementing the following code: @hooks.register('after_edit_page') def do_after_page_edit(request, page): if hasattr(page, "body"): soup = BeautifulSoup(page. ...

Update the screen layout to a grid when the screen is resized

I have a very specific request regarding the user experience. I want to display four links within a container, positioned next to each other in one row with a vertical line separating them. For example: Link one | Link two | Link three | Link four This ...

Utilizing Bootstrap to position a navigation bar next to a floated element causes surrounding content to be pushed

I am facing an issue with my 2 column layout where the content in the right column is being pushed down to clear the left column, resulting in a lot of vertical white space between the navigation and the content. Below is the code snippet: <head> ...

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the valu ...

Target the select element with a specific style applied, but restrict it to only be selected when nested within a div that shares the same style

Not quite sure about the effectiveness of the title, but here's what I'm attempting to accomplish. <div class="mystyle"> <select name="somename" id="somename"> <option value="Value1"> <option value="Value2" ...

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

Tips for incorporating jQuery val() into a span element!

I am currently working on a plugin that involves interacting with select elements grouped within a span. I want to enhance the functionality of my plugin by adding support for the val() function, which will allow users to easily get or set the 'value& ...

Ensure that the bottom border of the nav-item is in line with the

Is there a way to make the bottom border of a bootstrap nav item align perfectly with the bottom border of the navbar? My goal is to use the bottom border as an indicator for the selected element. I managed to achieve this with the default height of the na ...

Modify the alignment and orientation of the data within RadHtmlChart

I have a chart: <telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto"> <PlotArea> <Series> ...

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

Encountered an issue when executing python manage.py migrate and python manage.py runserver

form.py This is the form section. from django.contrib.auth.models import User from security_app.models import UserProfileInfo from django import forms class UserForm(forms.ModelForm): password = forms.CharField(widget=forms.PasswordInput()) ...

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

I encountered the following issue: A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll Additional information: Maximum request length exceeded. while attempting to upload 250 JPEG files, each around 98 KB in ...

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

How can I access a component variable within the styles in Angular?

Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

Is it necessary to convert SCSS into CSS in React?

I have a query about whether it is necessary to first compile our scss files into css and then import the css files into our react components, or if we can simply import the scss directly into the components? I've successfully imported scss directly ...

a single button with dual functionalities

I am new to the development field and have a question about jQuery. I want a single button to perform two different actions. For example, let's say we have a button labeled Pause/Resume. When I click on the button, it should first display "Pause", and ...