My code consists of HTML and CSS that look like this:
<div class="box" style="transform: scale(2);">
<div class="text">This is my text.</div>
</div>
I'm trying to figure out how to prevent the text inside the box from scaling along with the outer box during animation. Any suggestions?
It's not possible to scale only a portion of an element using CSS. However, you can create the illusion of scaling by implementing a different approach that is less taxing on the GPU and browser rendering:
<div class="container" style="position: relative">
<div class="scaling-block" style="position: absolute; transform: scale(2);"></div>
<div class="text">This is some text.</div>
</div>
This method involves:
There may be room for improvement in this structure, but hopefully, it offers some inspiration. Best wishes!
To adjust the size of the internal div, you should scale it by dividing 1 by the original scale (for example, if the original scale is 2, then divide 1 by 2 which equals to 0.5):
<div class="container" style="transform: scale(2);">
<div class="content" style="transform: scale(0.5);">This is the content.</div>
</div>I'm not certain if this aligns with your needs, however...
.container {
transform: scale(2);
}
.element {
transform: scale(0.5);
}
This will shrink the child element. To scale by a factor of x, you need to use a scale of 1/x for all child elements.
When transforming an element, all the content within it is also transformed in unison. Similar to using opacity where you must position text outside a scaling container to overlay it:
<div class="text">This is my text.</div>
<div class="box" style="transform: scale(2);"></div>
Alternatively, you can avoid using transform by applying an opposite style to the nested element:
<div class="box" style="transform: scale(2);">
<div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>
transform: scale(x) enlarges the complete element along with all of its children. Without viewing your CSS, it is recommended to implement a fixed solution to prevent scaling all text within the element. For instance, you can try the following approach:
.container:hover {
transform: scale(1.5);
}
.container:hover > .content {
transform: scale(0.7); // revert back to 70% of the original size inside the .container;
}
I am new to using bootstrap. Currently, I am creating a simple FAQ page with bootstrap and facing some challenges. https://i.sstatic.net/6fUW3.png I have been trying to adjust the position and margin of elements, but I am struggling to center the title a ...
I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...
One of my projects involves a form that contains a list of elements. I want this form to be responsive and suitable for all screen sizes. When I initially run the project on a larger screen, everything looks good. However, when I resize the screen to a sma ...
I am currently customizing the lavalamp plugin to be compatible with dropdown menus, but I have come across a minor issue. I am trying to determine the offsetWidth of a hidden element. Obviously, this question is a bit nonsensical. What I actually need is ...
I'm attempting to insert a dynamic URL within an img src tag. Below is my HTML and Script code. When a tab is clicked, a GET HTTP Method is called, which responds with an image URL. I want to use this image URL in the img src field. HTML Code ...
I'm currently facing an issue with the PHP XML DOM parser. When parsing HTML from the real world, I noticed that many elements have multiple CSS classes due to spaces in the 'class' attribute. However, when using getAttribute() on a DOMNode, ...
Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...
Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...
I am currently working on validating a time picker for a project. I found a helpful example for date validation at http://jqueryui.com/resources/demos/datepicker/date-range.html but I need to adapt it for a time picker. Specifically, I need to ensure tha ...
I am currently exploring the functionality of StumbleUpon's navigation bar by attempting to replicate it. My approach involves using 3 lists within 1, structured like this: <nav role="navigation"> <ul id="rightnav"> & ...
I am currently facing a challenge in populating an HTML table with data retrieved from a two-dimensional array. The information is being fetched through an $.ajax script after executing a php/MySQL query. Despite successfully parsing the data in the succes ...
Looking to create a mobile navigation menu that toggles between displaying "Menu" and "X" when clicked. Check out the code on jsfiddle $(document).ready(function() { $('.navbar-toggle').on('click', function () { if (matchMe ...
I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...
Just started learning about web development and I have a question regarding ajax calls. Specifically, when making an ajax call, do you need to specify the dataType and contentType? I'm slightly confused as my server-side code includes a servicestack e ...
Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...
Implementing a local save feature in my Web App is proving to be quite challenging. Every time I attempt to send data in any form, I consistently encounter the following error: A builtins.TypeError occurs, followed by a stack trace in /SaveFile and jquery ...
I successfully imported the table from MySQL to HTML, as shown below: https://i.sstatic.net/kzJtF.png My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); ...
Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...
Attempting to tackle a homework question today. This is the task at hand.... List a variety of foods in the following categories: Sandwiches, Drinks, Desserts. Use h2 tags to create these categories. Under each category, create a nested list that inc ...
I integrated a Material UI search bar into my React app's navbar following the instructions from the official documentation on MUI. However, the article does not provide any guidance on how to add a dropdown list when selecting the search input field. ...