Question 252008 in Html Question posted in
Some basic documentation can be found here.

Html – css body:after not working to stop on hover flicker

I have icons for my socials in black and white with :hover pseudo selectors to change them to the full colour equivalents which caused the expected flickering, the code for these is as follows:

.header-main-socials {
  width: fit-content;
  height: 100%;
  padding-right: 60px;
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.socials_icons {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}
#fb_icon { 
  background-image: url(../images/social-icons/facebook-bw.png);
}
#fb_icon:hover { 
  background-image: url(../images/social-icons/facebook.png);
}
#ig_icon { 
  background-image: url(../images/social-icons/instagram-bw.png);
}
#ig_icon:hover { 
  background-image: url(../images/social-icons/instagram.png);
}

I tried to stop the flickering using body:after and adding then hiding the content to preload however the flickering persists and if I remove the code to hide the content it still does not show up. Ctrl clicking on the url links takes me to the correct images and I am certain that the path is correct. I have tried with and without quotations within the url bracket with no luck. What am I doing wrong?

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(48, 48, 48);
}
body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(../images/social-icons/facebook.png) url(../images/social-icons/instagram.png);
}

EDIT: unsure if it is relevant for a task like this but I am using a reset style sheet, it’s fairly long so I will provide a link to it’s github instead of copy-pasting the entire thing: https://github.com/elad2412/the-new-css-reset

My html:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>T</title>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/main.css">
    
    <link rel="stylesheet" href="styles/home.css">
</head>

<body>
    <header id="header-main">

        <div id="header-main-logo">
            <img src="images/trlogocustom.png" alt="TRLogo" id="logo_nav">
            <nav id="header-main-nav">
                <ul>
                    <li><a href="index.html" id="home_nav" class="active">Home</a></li>
                    <li><a href="ourpeople.html" id="people_nav">Our People</a></li>
                    <li><a href="contact.html" id="contact_nav">Contact Us</a></li>
                    <li><a href="about.html" id="about_nav">About Us</a></li>
                </ul>
            </nav>
        </div>
        
        <div class="header-main-socials">
            <a href="https://www.facebook.com" target="_blank"><div class="socials_icons" id="fb_icon"></div></a>
            <a href="https://www.instagram.com" target="_blank"><div class="socials_icons" id="ig_icon"></div></a>
        </div>
    </header>

    <main>
        <h1>home page</h1>
    </main>

    <footer>

    </footer>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    body:after {}

    Was being overriden by another css file called later in the html causing the content to be removed and the flickering to persist.

    Answers by @mokorana are a good alternative to making separate images and getting around this if a later file needs the call.


  2. 0

    I would suggest you stick just to the colored images and use filter: grayscale(1);

    As an example:

    #fb_icon { 
    background-image: url(../images/social-icons/instagram-bw.png);
    filter: grayscale(1); 
}

#fb_icon:hover {
    filter: grayscale(0); 
}

    EDIT

    If you want to keep both images because they are different the following could help:

    #fb_icon { 
  background-image: 
    url(../images/social-icons/facebook-bw.png),
    url(../images/social-icons/facebook.png);
  background-size:auto;
}

#fb_icon:hover { 
  background-size:0 0,auto;
}

    Utilize multiple backgrounds to load both images and position the first one on top. Afterwards, modify background-size to display the other image upon hovering. By implementing this approach, both images will be loaded at the beginning and the second image will be prepared for display upon hovering.

    Furthermore you might want to use only classes in CSS. So use icons named like .icon-fb instead of using ID-Selectors. But that’s just a general tipp and has no impact at your question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search