Fine tune a css element :hover area - html

Question

I have a little tab coming out of a box, and for some reason applying a hover on that tab is very buggy and the actual hovering area is way above it. What is causing that and how can i fix it?
JSFiddle: https://jsfiddle.net/nmr4wu2z/
body {
background-color: #F5F5F5;
font-family: 'Open Sans Condensed', sans-serif;
width: 90%;
margin: 0 auto;
}
.logo {
height: 250px;
width: 250px;
background-color: #FF7148;
margin-top: 5%;
margin-left: 5%;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
z-index: -1;
box-shadow: 1px 1px 1px black;
}
.contact {
height: 70px;
width: 280px;
position: relative;
background-color: #FF7148;
box-shadow: 1px 1px 1px black;
top: -150%;
z-index: -2;
transition: all 0.5s ease;
}
.contact:hover {
margin-left: 80%;
}
.contactText {
margin-right: -15.5em;
text-align: center;
transform: rotate(90deg);
font-family: 'Open Sans Condensed', sans-serif;
color: white;
padding-top: 40px;
}
.contactEmail {
color: white;
margin-top: -3.4em;
text-align: center;
padding-left: 5px;
}
.logoText {
color: #F5F5F5;
text-align: right;
padding: 170px 10px;
}
<!-- use <header>, <nav>, <article>, <section>, <aside>, and <footer> -->
<header>
<div class="logo">
<h3 class="logoText"> Name <br> &nbsp &nbsp A Blog </h3>
<div class="contact">
<h3 class="contactText"> Contact </h3>
<h3 class="contactEmail"> Example#blabla.com </h3>
</div>
</div>

Answer 1

You have to make some changes
body {
background-color: #f5f5f5;
font-family: "Open Sans Condensed",sans-serif;
margin: 0 auto;
width: 90%;
}
.logo {
background-color: #ff7148;
box-shadow: 1px 1px 1px black;
font-family: "Open Sans Condensed",sans-serif;
font-weight: 300;
height: 250px;
margin-left: 5%;
margin-top: 5%;
position: relative;
width: 250px;
}
.contact {
background-color: #ff7148;
box-shadow: 1px 1px 1px black;
height: 105px;
position: absolute;
top: 30px;
transition: all 0.5s ease 0s;
width: 280px;
cursor: pointer;
}
.contact:hover {
margin-left: 85%;
}
.contactText {
color: white;
font-family: "Open Sans Condensed",sans-serif;
/* margin-right: -15.5em; */
/* padding-top: 40px; */
text-align: center;
transform: rotate(90deg);
transform-origin: 192px 85px 0;
}
.contactEmail {
color: white;
margin-top: -1.1em;
padding-left: 5px;
text-align: center;
}
.logoText {
background: #ff7148 none repeat scroll 0 0;
color: #f5f5f5;
padding: 170px 10px 35px;
position: relative;
text-align: right;
z-index: 1;
}
<header>
<div class="logo">
<h3 class="logoText"> Name <br> &nbsp &nbsp A Blog </h3>
<div class="contact">
<h3 class="contactText"> Contact </h3>
<h3 class="contactEmail"> Example#blabla.com </h3>
</div>
</div>
in with your style like I do in below snippet -

Answer 2

While the answer above triggers the hover for .contact, it's still buggy when you hover above the square.
In this jsfiddle I changed the approach a bit. Take .contact out of .logo (as it doesn't make logical sense) and apply float: left to both. Instead of overlaying them and adjusting the margin to make .contact move left, I start with a lower width and overflow: hidden; on contact, and increase the width on hover.