Increasing the size of text in CSS with the use of ":hover" and then causing it to return to its original smaller size

Allow me to explain my goal here.

I have text displayed on my website that I would like to enlarge when the user hovers over it and then shrink back down when they move their cursor away.

The issue I'm facing is that after enlarging the text using the CSS :hover method, I am unable to revert it back to its original size afterwards.

#sname{
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a{
    font-weight: bold;
    font-size: 4em;
}

#sname a:hover{
    font-size:88px;
    transition: all 500ms;
    font-size-adjust: 20px;

}

I seem to be at an impasse as I've attempted using not:(:hover) without success, and I've also experimented with :onmouseleave.

This website is for a college project, and while most of the work is done (just had to link it to a database), I simply want to enhance its appearance through CSS. While JavaScript could solve this, my understanding of it is limited.

Thank you.

javascripthtmlcsshover

Answer №1

To create a smooth transition effect, make sure to include the following code inside the CSS block for #sname a:

#sname {
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a {
    font-weight: bold;
    font-size: 4em;
    transition: all 500ms; /* Add this line */
}
    
#sname a:hover {
    font-size:88px;
    font-size-adjust: 20px;
}
<div id="sname">
    <a href="#">test</a>
</div>

Answer №2

Your solution is close! Just remember to adjust the transition and ensure all brackets are properly closed in your CSS code.

#sname {
  margin-top: 50px;
  margin-bottom: 50px;
  color: rgba(0, 0, 0, 0.5);
}
#sname a {
  font-weight: normal;
  font-size: 3em;
  transition: transform 1s;
}
#sname a:hover {
  font-size: 55px;
  font-size-adjust: 10px;
}
<div id="sname">
  <a href="#">TRY THIS</a>
</div>

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

Connect the Vue component to the Vue instance

I am currently working with a Vue component that looks like this: Vue.component('number-input', { props: {}, template: `<textarea class="handsontableInput subtxt area-custom text-center text-bold" v-model="displayValue" @blur="isInput ...

javascriptvue.js

There seems to be a lack of response from the Foursquare API in Node.js

Seeking guidance on retrieving a photo from a Foursquare venue using Node.js platform. Despite having the correct id and secret, the code is returning an unexpected result. My goal is to obtain the prefix and suffix of the image to properly display it as o ...

javascriptnode.jsfoursquare

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

What is the process for accessing an uploaded file in a server-side Classic ASP page?

I'm attempting to use Ajax to upload a file to a server-side script in classic ASP. Here is the relevant HTML and JavaScript code: <input type="file" id="fileInput" /> and function saveToServer(file) { const fd = new FormData(); fd.a ...

javascriptajaxasp-classic

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

function toggleButton1() { $("#button1").toggleClass("button-active button-inactive"); $("#button2").toggleClass("button-inactive button-active"); $("#button3").toggleClass("button-inactive button-active"); } function toggleButton2() { $("#butto ...

javascripthtmlcssbootstrap-4

Enhance the functionality of various textareas by implementing bullets for easier organization and formatting

Is there a way to add bullets to hidden textareas that are created dynamically? Currently, I can add bullets to visible textareas but would like the functionality to extend to newly created ones as well. Additionally, is it possible for these new bullets t ...

javascriptjqueryhtmltextarea

Interactive input field designed for modifying, adding, and removing data in MySQL

I am working on a project where I have a simple form. However, I need to dynamically change the form action from insert to update within the same page. Additionally, I also want to display the values on the same page. Within my code, I have set up the up ...

phpjavascriptjqueryhtmlajax

Accessing the $index value from the selected option when using ng-change within a select element

Although there are similar questions out there, I couldn't find one that addresses my specific need: ngRepeat inside option-tag ngChange inside select-tag I am trying to retrieve the index of the selected option. Here is a snippet of my code: < ...

javascriptangularjsdrop-down-menu

What is the process for incorporating icons and choices into the header bar?

Seeking advice on how to incorporate an icon into the right side alignment of a simple blank header on my webpage, similar to the image provided. I have searched through numerous threads on StackOverflow without finding a suitable solution. Could someone s ...

jqueryhtmlcss

How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background. How can I center the text and position the icon just to the left of the text? Here is the link to the fiddle with the code: jsfiddle <div class="error divErro ...

htmlcsscss-float

Eliminate image line breaks associated with hyperlinks without the need for table cells

My webpage includes a <div> with various images: <div> <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> </div> However, whenever I add a hyperlink to any of the images, it causes an unwante ...

htmlcss

"Exploring the Functionality of Dropdown Menus in ASP.NET Core 1

Looking for a unique way to create a dropdown menu in ASP.Net Core 1.0? I've scoured the internet but haven't found a solution specifically tailored to this new platform. Can anyone provide guidance on how to build a large dropdown menu in Core 1 ...

cssasp.netasp.net-core-1.0

Leveraging the power of Angular.js to generate random user profiles

I am attempting to utilize the RUG (Random User Generator) API for a project, but I am struggling to make it function correctly. I have been trying to initiate an HTTP request after a click event, but unfortunately, it does not seem to be working as expect ...

javascriptajaxangularjs

Unable to retrieve property from NextRequest

Currently, I am attempting to utilize MiddleWare in conjunction with Next.js's Middleware and JWT. Upon logging cookies and the typeof cookies variable, this is what I see on my console: { token: 'token='myToken'; Path=/' } obj ...

javascriptjsonnext.js

Using Google Script Code in Sheet to input a key and click on the submission button

Is there a way to enable using the Enter key in addition to clicking the submit button to input data and save it to a cell? I'm having trouble getting my current code to work. Any suggestions on how to modify it? <script> var itemBox = document ...

javascripthtmlgoogle-apps-script

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

csstypescriptnext.jsstyled-components

Can the server-side manipulate the browser's address bar?

Picture this scenario: a public display showcasing a browser viewing a web page. Can you send a GET or POST request from a mobile device to an HTTP server, causing an AJAX/pubsub/websocket JavaScript function to alter the displayed page on the screen? Per ...

javascripthtmlnode.js

How can I ensure text remains within a parent div and is positioned above an image?

After writing the following HTML and CSS, an issue arose when resizing the page: <div style="position: relative;"> <img width="100%" src="images/some.jpg"> <div class="header"> <h1>my header</h1> ...

cssposition

Strategies for aligning a div element in the middle of the screen

Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc. Can be achieved using CSS or JavaScript UPDATE: I attempted to use Javascript's Sys.UI.Dom ...

javascriptcss

Request Fancybox from parent document within an iframe

I have two pages, my index.html and social.html. I recently cleaned up my index.html file and left only the necessary jQuery code for using fancybox. My goal is to display images from social.html within fancybox when clicked on, but it should open in index ...

jqueryhtmliframefancybox