I am attempting to animate the width of the div, starting from 0. However, the padding I have set is preventing the div from being less than that padding. I have tried using border-sizing: border-box;, but it has not solved the issue.
What could I be doing incorrectly in my approach?
Visit here to see my Pen.
font-size: 14px;
box-sizing: border-box;
color: #fff;
background: #E2001A;
position: absolute;
margin: 85px;
overflow: hidden;
padding: 8px 10px;
white-space: nowrap;
width: 2px;
<style>
.hotspotCaption1 {
width: 350px;
height: 100px;
padding: 50px;
border: 1px solid blue;
box-sizing: border-box;
}
.hotspotCaption2 {
width: 400px;
height: 100px;
padding: 50px;
border: 1px solid green;
}
</style>
<div class="hotspotCaption1">Lorem Ipsum Dolor Sit Amet</div><br>
<div class="hotspotCaption2">Lorem Ipsum Dolor Sit Amet</div>It seems like your code is functioning correctly, but you might want to increase the width of the divs to enhance the layout. Also, consider creating two separate divs, one with box-sizing and the other without, for better customization.
One approach is to nest your div within another one and apply a width animation to the parent div.
.hotspotCaption {
font-size: 14px;
box-sizing: border-box;
color: #fff;
background: #E2001A;
padding: 8px 10px;
white-space: nowrap;
}
.outer-wrp {
margin: 85px;
width: 2px;
overflow: hidden;
}<div class="outer-wrp">
<div class="hotspotCaption">
Consectetur Purus Fermentum Commodo
</div>
</div>After extensive testing and research, I have discovered a highly efficient solution that I can confidently recommend:
.hotspotCaption {
font-size: 14px;
box-sizing: border-box;
color: #fff;
background: #E2001A;
position: absolute;
margin: 85px;
overflow: hidden;
padding: 0;
white-space: nowrap;
width: 0px;
animation-duration: 1s; /* Modify duration */
animation-name: appear; /* Customize name */
animation-iteration-count: 1; /* Adjust repeat count */
animation-direction: normal; /* Change direction */
animation-fill-mode: forwards; /* Set style after animation stops */
}
@keyframes appear {
from {
padding: 0;
width: 0;
}
to {
padding: 8px 10px;
width: 255px;
}
}<div class="hotspotCaption">Consectetur Purus Fermentum Commodo</div>Additionally, I have created a demonstration in the form of a Pen: Link.
It is worth noting that the initial method encountered issues due to the lack of transition or animation application, rendering the box-sizing: border-box; ineffective for padding. The key lies in constructing an animation that encompasses padding from the outset and gradually reduces it to zero. I trust that this revised solution will prove valuable to you!
I'm currently working on a Vue.JS photo website and I've hit a roadblock as described in the title. Despite trying various solutions, after spending two hours back and forth with ChatGPT, I've decided to seek help here. Below is the code sn ...
After combining the top and bottom blocks, I now have a gap in my layout. Is there a way to move this row up without causing any issues? I need assistance with resolving this problem using Bootstrap. <link rel="stylesheet" href="https://maxcdn.boots ...
I am currently working on the menu structure for my website <div class="header"> <ul> <li id="menu__lnk_one"><a href="#">Home</a></li> <li><a href="#">Our Story</a></ ...
I am currently utilizing the DataTables jQuery plugin (found at ) with the initialization code below: $('#reconcile_table').dataTable( { 'bSort' : true, 'bFilter' : true, 'bSortClasses' : false, &a ...
My goal is to keep the featured image size consistent on the main blog page. I made adjustments to this code: HTML: <div class="featured-image-excerpt"> <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrod ...
I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...
While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...
Just starting out with Selenium and web development in general, I've encountered a problem with locating an element using XPath. selenium.common.exceptions.NoSuchElementException I've been trying to troubleshoot for a while now, but haven' ...
Hey there, I've been experimenting with creating a responsive menu using Bootstrap, but I'm struggling with the implementation. My vision is to have a logo on the left side and a menu on the right side. Below is the concept for my menu design. ...
Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery. To see my curren ...
I have incorporated Angular Material into my Angular 2 project, and I am trying to insert a static image (HTML element) in the selected value of mat-select. Unfortunately, I have been unable to find a solution for this issue. Is there anyone who can ...
When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...
I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked. For instance, an example of a banner could be: <img src="https://myweb.com/images/banners/1.gif"> Upon clicking the banner im ...
I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...
Is there a way to prevent the thead of a table in an HTML page from being printed on all pages when a user initiates printing? The issue arises because I am using page-break-after: always; on an element before my table, causing the table header to also be ...
I need help centering a group of pictures (a 3x3 table) on my webpage. I was able to center them before adding image overlays, but now the images are showing up in the top left corner of the page. How can I group and center them, and how do I specify the i ...
I’ve seen this question asked many times, but I’m still struggling to figure it out. The examples I’ve come across are either too complex or involve Angular or Javascript. My goal is to learn how to set up 4 columns within a row. // initiating a ...
I'm interested in creating an app similar to Canva, but I'm not sure where to begin. I have a solid understanding of HTML and CSS, but my JavaScript skills are basic. I'm curious about the technologies they use. Is there a way to save HTM ...
<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...
I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...