Adjust text size within a div when hovering over it

I have a div with many elements inside. When the user hovers over the div, I want to increase the font size within that specific div. Here is the HTML code structure:

        <div class="col-sm-5 home-grid-2x">
            <div class="home-grid-2" style="right: 0%; top: 0%;">
                <div class="overlay" style="top: 99.9898%; left: -99.9224%;"></div>
                <a class="tile" href="/#/apply">
                <span class="tile-text">
                    Membership Application
                </span>
                </a>
            </div>
        </div>

The element hierarchy is as follows:

-> home-grid-2x
----> home-grid-2
----> overlay
----> tile
------->  tile-text

Essentially, I aim to enlarge the text size of tile-text when the user hovers over home-grid-2x. I attempted the following CSS:

.home-grids:hover .tile {
    font-size: 150%;
}

.home-grids:hover .tile.tile-text {
    font-size: 150%;
}

.home-grids:hover tile-text {
    font-size: 150%;
}

However, none of these solutions worked. Is this even possible?

htmlcss

Answer №1

If you want to achieve this effect using the existing selectors, follow these steps:

CSS

.home-grid-2x:hover .tile-text {
   font-size:150%;
}

Check out the DEMO HERE

Answer №2

Looks like your CSS and selectors are off, my friend! 

.home-grid-2x:hover .tile-text {
  font-size: 150%;
}
<div class="col-sm-5 home-grid-2x">
  <div class="home-grid-2" style="right: 0%; top: 0%;">
    <div class="overlay" style="top: 99.9898%; left: -99.9224%;"></div>
    <a class="tile" href="/#/apply">
      <span class="tile-text">
                    Membership Application
                </span>
    </a>
  </div>
</div>

Answer №3

You have selected the incorrect CSS property.

Instead of using text-size, you should utilize font-size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Here is an example:

.home-grid-2x:hover .tile {
    font-size:150%;
}

.home-grids-2x:hover .tile.tile-text {
    font-size:150%;
}

.home-grids-2x:hover tile-text {
    font-size:150%;
}

Answer №4

It's important to utilize the :hover CSS selector

Here is the HTML:

<div class="col-sm-5 home-grid-2x">
        <div class="home-grid-2" style="right: 0%; top: 0%;">
            <div class="overlay" style="top: 99.9898%; left: -99.9224%;"></div>
            <a class="tile" href="/#/apply">
            <span class="tile-text">
                Memmbership Application
            </span>
            </a>
        </div>
    </div>

CSS code:

.title-text:hover {
    font-size: 150%;
}

Check out the DEMO here!

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

Transform a series of images into a slider for compact devices

Looking to transform this row of images... https://i.sstatic.net/UWBUy.png I need to create a small carousel for displaying the images on mobile devices (Responsive Design) using bootstrap. Here is the code for the current arrangement of images: <div c ...

htmlcsstwitter-bootstrapbootstrap-4carousel

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab

How to align 3 buttons in a div using CSS

My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image). What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times? It ...

htmlcss

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equ ...

javascriptcssoverflowhiddenpage-jump

IE7 encountering a mixed content error when using html5shiv and SSL

In the process of developing my ASP.Net application that utilizes html5shiv and SSL, I encountered mixed content errors in IE7 specifically when using html5shiv. Interestingly, removing html5shiv eliminated the errors. Additionally, my app incorporates upd ...

asp.nethtmlsslinternet-explorer-7html5shiv

Utilize PHP to include attachments and information within an email form

This is my PHP code In the HTML form below, I aim to retrieve data from the name, email, phone number fields, and file attachment. When attempting to get the attached file (without any other information entered) in a live server environment, I'm exp ...

phphtmlemailphpmailer

What is the best way to select an element that is currently visible but hidden underneath another element?

I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future. However, I've encountered an issue where clicking on the upper rig ...

javascriptjqueryhtmlcss

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

Issue arises during initialization with Slick.js

I recently attempted to implement the slick.js function on my webpage by following the guidelines provided on . I copied the "center mode" function as my Jquery function, but unfortunately, the arrows/buttons and nav-docs were not generated in my slideshow ...

jqueryhtmlslick.js

Using Sencha Touch: What is the best method for populating an HTML panel with a JSON response?

I've exhausted all possible combinations in my attempts to load a JSON object from the server and use it to render a panel with video and other information. Despite my efforts, I haven't been able to make anything work. What could I be doing inco ...

htmljsonsencha-touchpanel

Ensure that the div expands to accommodate the content

I'm experiencing an issue where the content within a div with a blue border exceeds the boundaries of the div when it expands. How can I make sure that the div extends to contain all the content? Here is a demonstration of the problem: When I expand ...

htmlcss

Changing the size of an iframe and closing it by pressing the ESC

I am developing an application that requires the ability to resize an iframe. When the user clicks the "Full Screen" button, the iframe should expand to occupy the entire screen. The iframe should return to its original size when the user presses the "Es ...

javascriptjqueryhtml

I'm facing a problem with the margin and display setup in my assignment

I am encountering a bit of confusion regarding the margin when implementing the following code: Section { background-color: #FFFFFF; width="100%"; } p1 { font-family: Roboto; font-size: 22px; font-height: 1px; margin-top: 45px; margin-lef ...

htmlcss

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg

Utilization of CSS with the symbols of greater than and asterisk

I've been experimenting with Sequence.js and finding it really impressive. There's one line of code that I'm having trouble understanding: #sequence .seq-canvas > * {...} I discovered that the > symbol selects only direct descendant ...

csscss-selectors

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

javascriptcssthree.js

unable to adjust the maximum height limit

I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...

javascripthtmlcss