Sergi Sergi - 1 month ago 6
CSS Question

Fine tune a css element :hover area

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

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 -

Comments