CODEWITHSUNDEEP
htmlcss
juniordev
juniordev

Reputation: 1

Strange text shadow/double text on hover text overlay

I'm working on a site and I was trying to get the navbar icons on the left to change to text on hover. I was able to get that to work, but for some strange reason, whenever you go off hover, for a split second, you see that text - underlined and in purple! - off to the side. It doesn't stay for long, but it's very noticeable and I can't for the life of me figure out where that's coming from. I tried deleting the name attributes, but that didn't do anything. Can someone please help me figure out how to get rid of these?

Here's my code:

https://codepen.io/anon/pen/dBzzJo

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

body {
    background-color: #242424;
    height: 100vh;
}

.vertical-nav-bar {
    width: 100px;
    height: 100vh;
    background-color: #1a1a1a;
}

.name-logo {
    height: 13%;
    display: block;
    padding: 20px; 
    margin: auto;
    padding-bottom: 10px;
}

.vertical-nav-bar span {
    color: white;
    font-size: 13px;
    padding: 28px;
}

.logo {
    margin-bottom: 55px;
}

.icon {
  color: #4b4747;
  display: block;
  text-decoration: none;
   padding: 20px 35px 20px 35px;
  font-size: 25px;
}

#icon-text {
    position: relative;
    
}

#icon-text .image,
#icon-text .text {
    transition: opacity 0.25s ease-in-out;
}

#icon-text .text {
    position: absolute;
    
    opacity: 0;
}

#icon-text:hover .icon{
    opacity:0;
}

#icon-text:hover .text {
    opacity:1;
    color: #08fdd8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    text-decoration: none;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <link rel="stylesheet" type="text/css" href="text.css">
    <script src="fatima.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="row">
                <div class="col span-1-of-2 vertical-nav-bar">
                    <div class="logo">
                        <a href="https://fontmeme.com/3d-fonts/"><img class="name-logo" src="https://fontmeme.com/permalink/190622/9ca35e17317443d5cf13059d037bd9e7.png" alt="3d-fonts" border="0"><span>Name</span></a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="home"></ion-icon></a>
                        <a href="#" class="text">Home</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="person"></ion-icon></a>
                        <a href="#" class="text">About</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="list-box"></ion-icon></a>
                        <a href="#" class="text">Skills</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="eye"></ion-icon></a>
                        <a href="#" class="text">My Work</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="mail"></ion-icon></a>
                        <a href="#" class="text">Contact</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="logo-linkedin"></ion-icon></a>
                        <a href="#" class="text">Linked In</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

Upvotes: 0

Views: 58

Answers (3)

Shomz
Shomz

Reputation: 37701

It's because you're setting a lot of properties in your hover state, but those properties should be defined for the default state. So the moment the mouse is out, those hover rules are gone, but the transition animations are still running.

I've left only what's crucial for the hover state, see it in action:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

body {
    background-color: #242424;
    height: 100vh;
}

.vertical-nav-bar {
    width: 100px;
    height: 100vh;
    background-color: #1a1a1a;
}

.name-logo {
    height: 13%;
    display: block;
    padding: 20px; 
    margin: auto;
    padding-bottom: 10px;
}

.vertical-nav-bar span {
    color: white;
    font-size: 13px;
    padding: 28px;
}

.logo {
    margin-bottom: 55px;
}

.icon {
  color: #4b4747;
  display: block;
  text-decoration: none;
   padding: 20px 35px 20px 35px;
  font-size: 25px;
}

#icon-text {
    position: relative;
    
}

#icon-text .image,
#icon-text .text {
    transition: opacity 0.25s ease-in-out;
}

#icon-text .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    text-decoration: none;
    opacity: 0;
}

#icon-text:hover .icon{
    opacity:0;
}

#icon-text:hover .text {
    opacity:1;
    color: #08fdd8;
    
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <link rel="stylesheet" type="text/css" href="text.css">
    <script src="fatima.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="row">
                <div class="col span-1-of-2 vertical-nav-bar">
                    <div class="logo">
                        <a href="https://fontmeme.com/3d-fonts/"><img class="name-logo" src="https://fontmeme.com/permalink/190622/9ca35e17317443d5cf13059d037bd9e7.png" alt="3d-fonts" border="0"><span>Name</span></a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="home"></ion-icon></a>
                        <a href="#" class="text">Home</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="person"></ion-icon></a>
                        <a href="#" class="text">About</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="list-box"></ion-icon></a>
                        <a href="#" class="text">Skills</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="eye"></ion-icon></a>
                        <a href="#" class="text">My Work</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="mail"></ion-icon></a>
                        <a href="#" class="text">Contact</a>
                    </div>
                    <div id="icon-text">
                        <a href="#"><ion-icon class="icon" name="logo-linkedin"></ion-icon></a>
                        <a href="#" class="text">Linked In</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

1.) Remove the double links - a link on the texts alone should be sufficient

2.) Move all position, color etc. properties away from the hover rules to the rules for the regular state, both for the icons and the texts. Otherwise the regular state will have/switch to the default settings when fading out (which is what you were seeing)

https://codepen.io/anon/pen/BgdwQP

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

body {
    background-color: #242424;
    height: 100vh;
}

.vertical-nav-bar {
    width: 100px;
    height: 100vh;
    background-color: #1a1a1a;
}

.name-logo {
    height: 13%;
    display: block;
    padding: 20px; 
    margin: auto;
    padding-bottom: 10px;
}

.vertical-nav-bar span {
    color: white;
    font-size: 13px;
    padding: 28px;
}

.logo {
    margin-bottom: 55px;
}

.icon {
  color: #4b4747;
  display: block;
  text-decoration: none;
   padding: 20px 35px 20px 35px;
  font-size: 25px;
}

#icon-text {
    position: relative;
    
}

#icon-text .icon,
#icon-text .text {
    transition: opacity 0.25s ease-in-out;
}

#icon-text .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;    
    color: #08fdd8;
    opacity: 0;
    text-decoration: none;
}

#icon-text:hover .icon{
    opacity:0;
}

#icon-text:hover .text {
    opacity:1;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
  <link rel="stylesheet" type="text/css" href="text.css">
  <script src="fatima.js"></script>
</head>

<body>
  <header>
    <nav>
      <div class="row">
        <div class="col span-1-of-2 vertical-nav-bar">
          <div class="logo">
            <a href="https://fontmeme.com/3d-fonts/"><img class="name-logo" src="https://fontmeme.com/permalink/190622/9ca35e17317443d5cf13059d037bd9e7.png" alt="3d-fonts" border="0"><span>Name</span></a>
          </div>
          <div id="icon-text">
            
              <ion-icon class="icon" name="home"></ion-icon>
            <a href="#" class="text">Home</a>
          </div>
          <div id="icon-text">
              <ion-icon class="icon" name="person"></ion-icon>
            <a href="#" class="text">About</a>
          </div>
          <div id="icon-text">
              <ion-icon class="icon" name="list-box"></ion-icon>
            <a href="#" class="text">Skills</a>
          </div>
          <div id="icon-text">
              <ion-icon class="icon" name="eye"></ion-icon>
            <a href="#" class="text">My Work</a>
          </div>
          <div id="icon-text">
              <ion-icon class="icon" name="mail"></ion-icon>
            <a href="#" class="text">Contact</a>
          </div>
          <div id="icon-text">
              <ion-icon class="icon" name="logo-linkedin"></ion-icon>
            <a href="#" class="text">Linked In</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>

Upvotes: 1

Devender Kumar
Devender Kumar

Reputation: 9

#icon-text .image,
#icon-text .text {
    transition: opacity 0.25s ease-in-out;
}

Upvotes: 0

Related Questions