Hover effect causing changes to elements other than the one being hovered over

There seems to be an issue with hovering. When I hover over a specific .servNavItemTitle, the font weight of the other .servNavItemTitle briefly decreases before returning to normal quickly.

You can observe this behavior in the demo by hovering over one of the titles and noticing the reduction in font-weight on the other titles.

Is anyone else experiencing this problem?

Check out the jsfiddle demo here

Below is a simplified version of the code:

.servNavItemWrap {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-bottom: 50px;
  text-align: center;
  cursor: pointer;
}

.servNavItemWrap img {
  width: 75px;
  height: 75px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover img {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.servNavItemWrap a {
  text-decoration: none;
  outline: none;
}

.servNavItemTitle {
  margin-top: 5px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.servNavItemWrap:hover .servNavItemTitle {
  color: #FFF;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
<div id="serviceNavBlock2" class="iblock">
  <div class="servNavItemWrap">
    <a href="http://localhost:8080/profile.php">
      <img src="" alt="Aluminum Profile">
      <span class="servNavItemTitle hGc block">Aluminum</span>
    </a>
  </div>
  <div class="servNavItemWrap">
    <a href="#">
      <img src="" alt="Aluminum Components">
      <span class="servNavItemTitle hGc block">Components</span>
    </a>
  </div>

Answer №1

After identifying the issue, Temani and I collaborated to find a solution right here: Dealing with the impact of CSS transform on other elements while using transform:scale(0.5) in Android's webview. We were able to resolve the issue by including

-webkit-backface-visibility: hidden;
to the scaled image, resulting in flawless functionality.

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

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

The div's width shifts upon reaching the top of the page

Creating a blog site example and trying to lock the position of a div once it reaches the top of the page. Utilizing materialize.css for this task. <div class="row"> <div class="col m8 s12"> <!-- content goes here --> < ...

Issues with 'Backspace' and 'Clear' buttons on HTML calculator preventing proper function in JavaScript

Hello everyone! I've recently started working on a pure HTML/CSS/JS calculator project. While the HTML and CSS parts went smoothly, I'm facing some issues with getting the initial functions to work properly. Despite doing some research online, I ...

Tap on the image placeholder to replace it with your own image

Just starting out, I have the following HTML code within a <form>: <div class="image-upload"> <img id="send_photo_img1" src="assets/images/index2.png"/> <input id="send_photo_input1" type="file"/> <img id="send_photo_img2" sr ...

Create a div element that expands to occupy the remaining space of the screen's height

I am trying to adjust the min-height of content2 to be equal to the screen height minus the height of other divs. In the current HTML/CSS setup provided below, the resulting outcome exceeds the screen height. How can I achieve my desired effect? The foote ...

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Apologies for my lack of experience in PHP. I am in the process of creating a project without any knowledge of PHP. I have set up a database with a list of users and can display users based on specific information through a search. Each search query has a ...

The contents within the div are failing to scroll upwards

Looking to create a temporary reading tool to enhance my English skills for the IELTS exam. Currently, I am working on incorporating 1-40 answer fields on the right-hand side of the screen. https://i.sstatic.net/EwoMM.png I'm facing issues with scro ...

Issue: The value of an object is not defined (evaluating '$scope.inputcode.password')

HTML Form: <form ng-submit="mylogin()"> <div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" ng-model="inputcode.username"> ...

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

Bootstrap Modals Fail to Appear

Encountering an issue where the modal fails to display upon successful saving of data in the database. The data is successfully saved, but the ModalSuccess does not appear. This data originates from a form passed into AJAX. In case no input is provided in ...

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

Decreasing the gap between two <tr> elements

Looking to showcase a company logo alongside the company name without using flexbox for compatibility with older browsers? Take a look at this simple HTML and CSS code snippet: <table style="background-color: cadetblue;width:100%;padding:10px"> ...

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

Is there a way to refresh a specific element without having to reload the entire page when the button is clicked

While working on a rock, paper, scissors game in JavaScript, I found it tedious to have to constantly reload the page after each play. To solve this issue, I attempted to add a button that would reset the game for a new round. However, I encountered an err ...

Issues with progress loading bars are preventing them from functioning properly on both Chrome and Internet

When I call an ajax method, I have a custom loading bar that works perfectly in Firefox. This is how my code looks: HTML: <div id="loading_dim" > <div></div> </div> CSS : #loading_dim { position: fixed; left:0; ...

Ways to adjust the inner white hue of the exclamation triangle icon in Font Awesome?

Is there a way to change the color of the inner (white) part of this icon? <i class="fa fa-exclamation-triangle"></i> Just adding <i class="fa fa-exclamation-triangle" style="color:red"></i> won't ...

Unique CSS content for varied designs

I have a CSS code snippet for a tooltip: .GeneralTooltip { background:#c7430f; margin:0 auto; text-transform:uppercase; font-family:Arial, sans-serif; font-size:18px; vertical-align: middle; position:relative; } .GeneralTooltip::before { content:"This is ...

The div is lacking in height

I have 3 divs that belong to the stackContainer class: .stackContainer { position: relative; } Within these divs, I want multiple elements stacked on top of each other. To achieve this, I use the following code: .stackItem { position: absolute; ...

When saving, generate a new object and send it to the designated endpoint

I'm feeling a bit confused, unsure of how to proceed. In my program, the task is to upload images (in base64 format) and add them to an array with a maximum limit of 5. After uploading the images, the next step is to click a button labeled Save to s ...

A lateral sliding motion

Here is the HTML code I am working with: <div class="menuTabs"> <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="button" value="a" /> <input class="menutabBTN" name="" type="b ...