CODEWITHSUNDEEP
htmlcssfadein
Hector Harris-Burton
Hector Harris-Burton

Reputation: 101

Hover revealing tooltip

I've been trying to make this text fade in when the hover occurs on the arrow. Had no luck and been stuck on it for a little while - Would appreciate any help.

Also if I were to have this fade in from the left to the right of the button would that include JS?

.fa-long-arrow-alt-left {
  display: none; 
  position: absolute; 
  top: 3vh; 
  left: 3vw; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}

.return-text {
  visibility: hidden;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;

}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  transition: 1s ease-in-out;
}
<html>
<head>
	<title>Hector's Portfolio</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!-- Linking social icons -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
<button id="return" class="fas fa-long-arrow-alt-left"><span class="return-text">Return</span>	
</button>
</body>

Upvotes: 3

Views: 36

Answers (1)

StefanBob
StefanBob

Reputation: 5128

Add an opacity transition, as you can't transition visibility or display.

You have transitions in place so just add the opacity.

As for the left-to-right animation I believe you can do this with css animations take a look at this example: CSS fade left to right

.fa-long-arrow-alt-left {
  display: none;
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 99;
  border: none;
  outline: none;
  background: none;
  color: black;
  cursor: pointer;
  padding: 15px;
  font-size: 18px;
  transition: 0.3s ease;
}

.return-text {
  visibility: hidden;
  opacity: 0;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;
}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  opacity: 1;
  transition: 1s ease-in-out;
}
<html>

<head>
  <title>Hector's Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Linking social icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
  <button id="return" class="fas fa-long-arrow-alt-left"><span class="return-text">Return</span>	
</button>
</body>

Upvotes: 2

Related Questions