Changing results in a 1px movement of the image

Despite referencing this specific discussion thread, I still couldn't resolve the issue in my case (unless I placed the suggested code incorrectly).

Essentially, when hovering over a link in Firefox, some images underneath shift by 1px (not all of them, so you might need to experiment to see it). Additionally, Chrome blurs all the images on top of that.

Feel free to take a look at my Codepen example.

The problem disappears once I remove:

  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;

Is there a way to fix this without removing that particular line?

Here's the full code provided below:

HTML

<div class="main">
        <div class="hover_img animated fadeInUp">
            <a class="hover_link" href="work/sensory/">Sensory Possibilities<span>
              <img src="http://witch-house.com/NEW/sensory.png"/></span></a>
            /
            <a class="hover_link" href="work/designing/">Designing Humans<span>
                <img src="http://witch-house.com/NEW/deshum.png"/></span></a>
            /
            <a class="hover_link" href="work/daggerforest/">Dagger Forest<span>
                <img src="http://witch-house.com/NEW/dagger.jpg"/></span></a>
            /
            <a class="hover_link" href="work/wavelength/">Wavelength<span>
               <img src="http://witch-house.com/NEW/dagger.jpg" class="img4"></span></a>
            / 
            <a class="hover_link" href="work/talescrypt/">Tales From The Crypt<span>
                <img src="http://witch-house.com/NEW/tftc.jpg"/></span></a>
            /
            <a class="hover_link" href="work/dnahackers/">DNA Hackers<span>
                <img src="http://witch-house.com/NEW/dnahx.jpg"/></span></a>
            /
            <a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?<span>
                <img src="http://witch-house.com/NEW/robots.jpg"/></span></a>
        </div>
    </div>
</div>

and CSS:

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  font-size: 2.5vw;
  line-height: 2.8vw;
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight:200;
  margin: 0 auto;
}

.hover_link {
  color: #d2d2d2;
  font-family: 'Rubik';
  text-transform: uppercase;
  font-weight:900;
}
.hover_link:hover {
  text-decoration: none;
  color: #4b2de5;
}

/* PROJECTS IMAGES */

.hover_img span {
  pointer-events: none;
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}
.hover_img a:hover span {
  display: inline-block;
  opacity: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a {  text-decoration:none; }
img { width: 40vw; }

Answer №1

Check out the CSS snippet below:

  .wrapper {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    font-size: 2.3vw;
    line-height: 2.6vw;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-weight:300;
    margin: 0 auto;
  }

  .accent_link {
    color: #b4b4b4;
    font-family: 'Open Sans';
    text-transform: uppercase;
    font-weight:700;
  }
  .accent_link:hover {
    text-decoration: none;
    color: #694fb8;
  }

  /* GALLERY IMAGES */

  .hover_image span {
    z-index: -2;
    opacity: 0;
    display: inline-block;
    transition: opacity .4s ease-in-out;
    position: fixed;
    width: 100%;
    text-align: center;
    top: -55%;
    left: 0;
  }
  .hover_image a:hover span {
    opacity: 1;
  }

  a {  text-decoration:none; }
  img { width: 65%; margin: 0 auto;}

Answer №2

and modifying the way we incorporate images in HTML like this

    <div class="main">
         <div class="hover_img animated fadeInUp">
             <a class="hover_link" href="work/sensory/">Sensory Possibilities
                <span style="background-image: url(http://witch-house.com/NEW/sensory.png)" /> 
               </span></a>
                /
                <a class="hover_link" href="work/designing/">Designing Humans
                  <span style="background-image: url(http://witch-house.com/NEW/deshum.png)" /> 
                  </span></a>
                /
                <a class="hover_link" href="work/daggerforest/">Dagger Forest
                  <span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" /> 
                  </span></a>
                /
                <a class="hover_link" href="work/wavelength/">Wavelength
                  <span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" /> 
                  </span></a>
                / 
                <a class="hover_link" href="work/talescrypt/">Tales From The Crypt
                  <span style="background-image: url(http://witch-house.com/NEW/tftc.jpg)" /> 
                  </span></a>
                /
                <a class="hover_link" href="work/dnahackers/">DNA Hackers
                  <span style="background-image: url(http://witch-house.com/NEW/dnahx.jpg)"/>
                  </span></a>
                /
                <a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?
                  <span style="background-image: url(http://witch-house.com/NEW/robots.jpg)"/>
                  </span></a>
            </div>
        </div>
  </div>

and here is the CSS code:

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54%;
    font-size: 2.5vw;
    line-height: 2.8vw;
    font-family: 'Raleway';
    text-transform: uppercase;
    font-weight:200;
    margin: 0 auto;
  }

  .hover_link {
    color: #d2d2d2;
    font-family: 'Rubik';
    text-transform: uppercase;
    font-weight:900;
  }
  .hover_link:hover {
    text-decoration: none;
    color: #4b2de5;
  }

  /* PROJECT IMAGES */

  .hover_img span {
    z-index: -1;
    opacity: 0;
    display: inline-block;
    transition: opacity .3s ease-in-out;
    position: fixed;
    width: 100%;
    text-align: center;
    left: 0;
    top: -50%;
    height: 200%;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
  }
  .hover_img a:hover span {
    opacity: 1;
  }

  a {  text-decoration:none; }
  img { width: 60%; margin: 0 auto;}

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

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

Bizarre CSS Transitions and Scaling Quirks in Webkit

Working on a website, you can check it out here In Chrome, some strange behavior occurs when the window reaches a certain resolution. Specifically, at 943 pixels width, white bars appear next to images when hovering over them, giving the impression that t ...

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

CSS: Creating a dynamic layout to center the card on screens of all sizes

My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

Unusual behavior observed with Chrome image resizing

I've encountered an odd issue with Chrome related to image resizing when the window size changes. When I have Chrome snapped fullscreen in Windows (double-clicking to snap), and then unsnap the window, the images are not scaling correctly back to the ...

Connections between Wordpress websites and CSS styling

My inquiry consists of three parts: I am currently in the process of constructing a portfolio website using Wordpress, and I have encountered some peculiar links. For instance, on my about page, the link appears as localhost/AFolder/anotherfolder/ind ...

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

What could be causing the hover effect to not work on other elements within the div?

I am working on creating a card that displays only the image when not hovered, but expands and reveals additional information in a div to the right of the image when hovered. Unfortunately, when I hover over the image and then move towards the adjacent div ...

organizing the elements in the list into a visually appealing layout

I am currently working on transforming table data into a pivot format and presenting it in a horizontal list. My goal is to ensure the design is responsive enough to be viewed on mobile devices as well. Below you can find the CSS code I have implemented fo ...

Leveraging LESS variables within media queries

After inputting the less code below into : @item-width: 120px; @num-cols: 3; @margins: 2 * 20px; @layout-max-width: @num-cols * @item-width + @margins; @media (min-width: @layout-max-width) { .list { width: @layout-max-width; } } The resul ...

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

Exponential calculator in Javascript

I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet: <html> <head> <meta charset = "utf-8" ...

Is there a way to create a dynamic CSS for a custom JSF component through code generation?

I am currently developing a custom JSF component that displays content in multiple columns in a "responsive" manner. This component utilizes the "CSS Multi-column Layout Module" (http://www.w3.org/TR/css3-multicol/) (tutorial available in French: ). Belo ...

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

I have been struggling with a layout issue for the past couple of days and I am in need of assistance from someone who can help me. Unfortunately, I am unable to upload an image here as I am new and do not yet have enough reputation points. The Layout Str ...

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border ...

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...

Optimal techniques for leveraging CSS within Mui and Reactjs

Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...

Tips for customizing ngTable with expandable detail panels

I am currently working on styling a layout using ng-table, which includes a table within each row. The expanding functionality in Angular is implemented as follows: <tr ng-if="org.expanded" ng-repeat-end> <td></td> <td></td& ...