What is the best way to implement a top border effect on hover?

I am facing an issue with my category img. When I hover over it, a red border appears at the top and my title moves down by 2px. How can I resolve this problem and eliminate the extra 2px?

      .box {
            display: inline-block;
            background: pink;
            margin-right: 10px;
            width: 187px;
            min-height: 70px;
            height: 100%;

            &:hover {

                background: #F2F2F2;
                border-top: 3px solid #E72D35;
            }
        }
htmlcssangular

Answer №1

To maintain the size and text position consistency between both states, consider adding a transparent border of the same width in the initial state. Including a subtle transition effect can enhance the overall user experience:

.section {
  display: inline-block;
  background: lightblue;
  margin-right: 10px;
  width: 205px;
  min-height: 80px;
  height: 100%;
  border-bottom: 4px solid transparent;
  transition: all 0.3s;
}

.section:hover {
  background: #E8F7FF;
  border-bottom: 4px solid #42A5F5;
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>

Answer №2

 .container {
            display: inline-block;
            background: pink;
            margin-right: 10px;
            width: 187px;
            min-height: 70px;
            height: 100%;
            border-top: 3px solid transparent;

            &:hover {

                background: #F2F2F2;
                border-color: #E72D35;
            }
        }

Answer №3

While I may not be an expert, I thought of a solution (assuming I understood the problem correctly) that involves adding a 3px padding and removing it on hover. I have implemented this idea below:

.container {
         display: inline-block;
         background: purple;
         margin-right: 15px;
         width: 200px;
         min-height: 80px;
         height: 100%;
         padding-top: 3px;
     }
.container:hover {
             background: #C0C0C0;
             border-top: 3px solid #7B68EE;
             padding-top: 0px;
         }

https://codepen.io/bahax/pen/RwMyGyg

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

Develop a JavaScript function to declare variables

I am currently attempting to develop a small memory game where the time is multiplied by the number of moves made by the player. Upon completion of all pairs, a JavaScript function is executed: function finish() { stopCount(); var cnt1 = $("#cou ...

javascriptjqueryhtml

How can I use React Native to align two text tags differently within the same row?

In this particular scenario, I attempted to showcase two distinct elements within a list item. However, I encountered a challenge in figuring out how to display the "item.date" on the left side of the line, and the string "Click to show.&qu ...

javascripthtmlcssreact-nativetags

Find with user-friendly input/label removal function (Ionic 2)

I have embarked on creating a recipe application where users can search for recipes by ingredients. I want to enhance the functionality of the search feature so that when users press the spacebar to enter the next input, it appears as a label below with an ...

angulartypescriptionic-frameworkionic2

First child CSS selector, excluding siblings

Is there a way to target only the initial occurrence of an element without affecting any nested elements? I specifically want to single out the first ul element within the #menu container, without selecting any children or descendants. For instance, using ...

csscss-selectors

How do I adjust the ul size to be proportionate to the header?

I have a list with corresponding hyperlinks in my code, and I am trying to make these elements the same size as the header. I attempted adding auto padding and height auto but it did not produce the desired result. Here is the HTML snippet: <header id ...

htmlcss

Personalized border color for radio buttons

What is the best way to change the color of my radio button along with its border color when the radio button is selected? My code is functioning properly, except for the border color when the radio button is selected. Below is the CSS code that I have ad ...

htmlreactjscsscss-selectors

Unable to execute function on Child Element

I am encountering an issue when trying to call a function on a child component. Whenever I try to invoke it by clicking, I always receive an error indicating that the function is undefined. Here is the code in my Parent component: import {MatTableCompone ...

angulartypescript

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

javascripthtmleclipse

A chatbot developed with deep learning algorithms and powered by Flask was designed to interact with users. However, one of its

My project involves creating a chatbot using a deep learning model and Flask. I have encountered an issue where the bot is not responding and displays the following error message: GET /run?msg=salut HTTP/1.1" 404 - This snippet contains the HTML code: ...

pythonhtmlflaskdeep-learningchatbot

Strange symbols were stored in the database after saving the textarea value

After submitting a form, text entered into a text area is being saved to my database. However, in one instance, certain characters such as • are appearing in the field. For example: • Text When retrieving the data from the database using Jav ...

javascriptjqueryhtmldatabasecharacter-encoding

Angular animation triggered when a specific condition is satisfied

I am working on an animation within my Angular application @Component({ selector: 'app-portfolio', templateUrl: 'portfolio.page.html', styleUrls: ['portfolio.page.scss'], animations: [ trigger('slideInOut&apo ...

javascriptcssangularionic-frameworkanimation

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

htmlcssbootstrap-4

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

htmlcsstwitter-bootstrapjsf

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

javascriptjquerycss

Combine individual websites that have been deployed separately into a single website and display them using a uniform base URL

I have multiple website projects deployed on separate subdomains with their specific resources. I want to create a launch/landing subdomain website that allows users to access each website in different subdomains through the menu, without changing the subd ...

angularazureasp.net-coreroutesazure-active-directory

What is the best way to verify observables during the ngOnInit phase of the component lifecycle?

Despite reading numerous articles on testing observables, such as learning how to write marble tests, I am still struggling to find a clear solution for testing a simple observable in the ngOnInit lifecycle of my component. ngOnInit(): void { this.sele ...

angularunit-testingjasmineangular2-observables

Dreamweaver and jQuery collaboration for displaying PDFs in a container

I am currently utilizing the jQuery accordion functionality within the latest version of Dreamweaver. My goal is to link a specific PDF with each account so that when an account is selected, the corresponding PDF will open in the designated "content goes h ...

javascriptjquerycsshtmldreamweaver

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

javascripthtmlcss

The button's URL will vary depending on the condition

As a newcomer to coding, I am seeking guidance on creating a button with dynamic URLs based on user input. For instance, let's say the button is labeled "Book Now" and offers two package options: Standard and Premium. I envision that if a user selec ...

javascripthtml

Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padd ...

htmlcssangulartwitter-bootstrapbootstrap-4