Tanuki Tanuki - 10 months ago 37
CSS Question

How to set proper hitboxes when trying to reveal hidden text on hover - over the text

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>





Also, sorry for my English, not my language.

Answer Source

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.

I am also not sure if the method that I used is correct. To create this I connected various methods from 3 different tutorials.

.btn {
	width: 92px;
	height: 42px;
	position: fixed;
	bottom: 50%;
	left: 16px;
	z-index: 100;
	overflow: hidden;
}
.tooltip {
	width: 206px;
	height: 42px;
	position: fixed;
	bottom: calc(50% - 16px);
	left: 16px;
	opacity: 0;
	z-index: 100;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(.64,0,.36,1);
}
.tooltip:before {
	display: block;
	position: absolute;
	content: 'Developed by Jonathan Doe';
	font-weight: normal;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 26px;
	text-align: left;
	top: 9px;
	left: 16px;
}
.btn:hover .tooltip {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-16px);
}
.btn:before {
	display: block;
	position: absolute;
	content: 'Copyright';
	font-weight: normal;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 26px;
	text-align: left;
	top: 9px;
	left: 16px;
	opacity: 1;
	transition: all 0.3s cubic-bezier(.64,0,.36,1);
}
.btn:hover:before  {
	top: -7px;
	opacity: 0;
}
	<div class="btn">
		<div class="tooltip"></div>
	</div>

Does it make any sense?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download