Trying to reveal hidden text on hover - over the text

Question

I'll get straight to the point. What I want to do is to create simple text, such as: © 2017, that will change (on hover) to developed by Jonathan Doe. I want activation field to be smaller than the deactivation field but the problem is that hitbox for the © 2017 is the size of hidden element.

I was looking for the solution on the internet for quite some time but everything that I found, was button with not flexible width. Maybe I need to use some sort of tooltip, that will cover passive state? I am not sure.

I want this element to float in the bottom left cornet of the site, that's why I set position to fixed.

The other problem is that when text developed by Jonathan Doe is active, deactivation field is bigger on top than it should be. It looks like elements with 0 opacity are messing up my hitboxes. I was trying to play with display: none;, but then animation is not playing.

I started to code literally yesterday, so please forgive me for all the noob mistakes. I am trying to understand the logic behind all of this.

I've added the piece of code, I hope I did it right.

.con {
  position: fixed;
  font-weight: normal;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  z-index: 99;
}


/* © 2017 */

.con.copyright:before {
  position: fixed;
  padding: 9px 16px 7px 16px;
  bottom: 16px;
  left: 16px;
  font-size: 14px;
  line-height: 26px;
  text-align: left;
  content: '© 2017';
  opacity: 1;
  transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}

.con.copyright:hover:before {
  opacity: 0;
  bottom: 32px;
}

.con.copyright:after {
  position: fixed;
  padding: 9px 16px 7px 16px;
  bottom: 0px;
  left: 16px;
  font-size: 14px;
  line-height: 26px;
  text-align: left;
  content: 'developed by Jonathan Doe';
  opacity: 0;
  transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}

.con.copyright:hover:after {
  opacity: 1;
  bottom: 16px;
}

<div class="con copyright"></div>

I do not like how you can keep developed by Jonathan Doe text active by quickly moving your mouse over it.

Answer 1

It took me few additional days but I think I've finally did this. Hitboxes are perfect. The only one problem now is that for some unknown reason, text is not antialiased. I was playing with some values but nothing helped.

EDIT: I've came out with better version. Less messy and with working antyaliasing.

Here is the new version - maybe some beginner like myself will find this useful. I will update it if I discover anything new:

EDIT: I've: • added transition-delay and reversed it so that effect is properly played on "mouseout"

EDIT: I've: • replaced visibility: hidden; with pointer-events: none; because with greater transform: translateY values "mouseout" was glitchy • split transition: all to transition: transform, opacity and removed transition-delay to get better control over delays

EDIT: Minor adjustments for better UX

* {
	box-sizing: border-box;
}

/* copyright */

.copyright {
	position: fixed;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	left: 16px;
	top: 16px;
	text-align: left;
	width: 78px;
	height: 42px;
	z-index: 10;
}
.copyright:before {
	pointer-events: none;
	position: absolute;
	display: block;
	top: 13px;
	left: 16px;
	opacity: 1;
	content: '© 2017';
	transform: translateY(0px);
	transition: transform .24s 0s ease, opacity .16s .08s ease;
}
.copyright:hover:before {
	transform: translateY(-24px);
	transition: transform .24s 0s ease, opacity .16s 0s ease;
	opacity: 0;
}
.copyright_ch {
	position: absolute;
	opacity: 0;
	padding: 13px 0px 0px 16px;
	top: 0px;
	left: 0px;
	pointer-events: none;
	width: 205px;
	transition: transform .24s 0s ease, opacity .16s 0s ease;
	height: 100%;
	transform: translateY(24px);
}
.copyright:hover .copyright_ch {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0px);
	transition: transform .24s 0s ease, opacity .16s .08s ease
}

<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>

note: This is not really a flexible solution. If you would like to change inscriptions, font size, hitboxes etc., you will have to change and adjust values manually. To get a good look at current hitboxes add background-color: #cccccc; to .copyright and .copyright_ch classes. You might also want to play with opacity: 0/1 so that you can see what you are working with.