Hover state still active after mouse leaves div - html

Question

I am experiencing a weird issue where the hover state is still being hovered after the mouse leaves the div. To see this hover over the picture. I tried inspecting but I can't figure it out.
Youtube video https://youtu.be/PX8psGOTbNM
Not working on Wordpress: http://sogomarketingagency.com/test-3/
Works fine on CodePen: http://codepen.io/CookieFresh89/pen/emLXEK
I have tried deactivating all plugins and reverting back to original theme and am still getting this problem.
The Code:
.modal {
display: block;
text-align: center;
width: 185px;
margin: 0 auto;
}
.modal-about > label {
background: #07B288;
border-radius: .3em;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-left: 0px;
padding: 0.50em 1.0em;
-webkit-transition: all 0.55s;
transition: all 0.55s;
}
.modal-about input {
position: absolute;
left: -50px;
top: 130px;
z-index: -10;
}
#media (min-width: 43.75em) {
.modal-about input {
right: 50px;
}
}
.modal__overlay {
background: rgba(255, 255, 255, 0.9);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: -800;
}
.modal__box {
padding: 1em .75em;
position: relative;
margin: 1em auto;
max-width: 500px;
width: 90%;
}
#media (min-height: 37.5em) {
.modal__box {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -80%);
-ms-transform: translate(-50%, -80%);
transform: translate(-50%, -80%);
}
}
#media (min-width: 50em) {
.modal__box {
padding: 1.75em;
}
}
.modal__box label {
background: #07B288;
border-radius: 50%;
color: white;
cursor: pointer;
display: inline-block;
height: 1.5em;
line-height: 1.5em;
position: absolute;
font-size: 30px;
right: .5em;
top: .5em;
width: 1.5em;
}
.modal__box h1 {
font-size: 50px;
margin-bottom:0px;
}
.modal__box h2 {
color: #07B288;
margin-bottom: 15px;
margin-top: 10px;
text-transform: uppercase;
}
.modal__box hr {
border: 0;
height: 1px;
background: #E8E8E8;
}
.modal__box p {
text-align: left;
}
.modal__overlay {
opacity: 0;
overflow: hidden;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked ~ .modal__overlay {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 800;
}
input:focus + label {
-webkit-transform: scale(0.97);
-ms-transform: scale(0.97);
transform: scale(0.97);
}
.about-name-h1 {
margin-top: 10px;
}
.about-wrapper {
width: 185px;
height: 227px;
position: relative;
}
.about-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 40px 0px;
background: rgba(255, 255, 255, 0.75);
visibility: hidden;
opacity: 0;
text-align: center;
text-transform:uppercase;
}
.about-overlay:hover {
padding: 70px 0px;
}
.about-wrapper:hover .about-overlay {
visibility: visible;
opacity: 1;
}
.about-name, .about-overlay {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.about-name {
padding: 15px 0px;
text-align: center;
border: 1px solid #e8e8e8;
border-top: 0;
font-size: 16px;
background: #ffffff;
margin:0px;
width: 183px;
cursor:pointer;
}
.about-name:hover {
background: #07B288;
color: #fff;
}
.avatar-frame {
border: 2px solid #07B288;
}
.avatar-frame, .avatar-frame img {
width: 120px;
height: 120px;
-webkit-border-radius: 60px;
margin: 0 auto;
/* Saf3+, Chrome */
border-radius: 60px;
/* Opera 10.5, IE 9 */
/*-moz-border-radius: 30px; Disabled for FF1+ */
}
<div class="about-wrapper">
<img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-president.jpg" alt="polaroid" />
<div class="about-overlay">
<h3>Founder</h3>
<div class="modal-about">
<input id="modal-about" type="checkbox" name="modal-about" tabindex="1">
<label for="modal-about">View Profile</label>
<div class="modal__overlay">
<div class="modal__box">
<label for="modal-about">✖</label>
<div class="avatar-frame">
<img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-me-president-circle.jpg" alt="">
</div>
<h1 class="about-name-h1">Garry Howell</h1>
<h2>Founder</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
</div>
</div>
</div>
</div>
</div>
<h4 class="about-name">Garry Howel</h4>

Answer 1

It seems that div.modal__overlay expands div.about-wrapper which creates a wider area to trigger :hover.
Edit: As mentioned by CBroe, descendants trigger the hover states of their ancestors. Since div.modal__overlay is position:fixed, it effectively creates a second hover area for but outside of div.about-wrapper.
I had success by adding visibility to the toggle for div.modal__overlay:
.modal__overlay {
opacity:0;
visibility:hidden;
...
}
input:checked ~ .modal__overlay {
opacity: 1;
visibility:visible;
...
}
However, I'm not sure why this helps, because elements hidden by visibility:hidden are still supposed to affect layout (i.e. take up space). So, if it creates a bigger :hover area with opacity:0, shouldn't it do the same with visibility:hidden? Maybe someone can help clarify this behavior.
Edit: More insight from Cbroe in the comments, below.
I built a demonstration of the difference, below. Try hovering over the blue area for box #1. Then try hovering over the same area on box #2, which is visibility:hidden.
div.container {
position:relative;
width: 200px;
height: 50px;
border: 1px solid #CCC;
margin: 0 0 1em 0;
}
div.prop {
margin-left: 200px;
width: 200px;
height: 50px;
background-color: #0CC;
}
div.prop.invisible {
visibility: hidden;
}
div.container:hover {
background-color: #F00;
}
div.container p {
position:absolute;
top:0;
left:0;
}
<div class="container">
<p>BOX #1</p>
<div class="prop"></div>
</div>
<div class="container">
<p>BOX #2</p>
<div class="prop invisible"></div>
</div>
And here is my working version of your code:
.modal {
display: block;
text-align: center;
width: 185px;
margin: 0 auto;
}
.modal-about > label {
background: #07B288;
border-radius: .3em;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-left: 0px;
padding: 0.50em 1.0em;
-webkit-transition: all 0.55s;
transition: all 0.55s;
}
.modal-about input {
position: absolute;
left: -50px;
top: 130px;
z-index: -10;
}
#media (min-width: 43.75em) {
.modal-about input {
right: 50px;
}
}
.modal__overlay {
background: rgba(255, 255, 255, 0.9);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: -800;
}
.modal__box {
padding: 1em .75em;
position: relative;
margin: 1em auto;
max-width: 500px;
width: 90%;
}
#media (min-height: 37.5em) {
.modal__box {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -80%);
-ms-transform: translate(-50%, -80%);
transform: translate(-50%, -80%);
}
}
#media (min-width: 50em) {
.modal__box {
padding: 1.75em;
}
}
.modal__box label {
background: #07B288;
border-radius: 50%;
color: white;
cursor: pointer;
display: inline-block;
height: 1.5em;
line-height: 1.5em;
position: absolute;
font-size: 30px;
right: .5em;
top: .5em;
width: 1.5em;
}
.modal__box h1 {
font-size: 50px;
margin-bottom:0px;
}
.modal__box h2 {
color: #07B288;
margin-bottom: 15px;
margin-top: 10px;
text-transform: uppercase;
}
.modal__box hr {
border: 0;
height: 1px;
background: #E8E8E8;
}
.modal__box p {
text-align: left;
}
.modal__overlay {
opacity:0;
visibility:hidden;
overflow: hidden;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked ~ .modal__overlay {
opacity: 1;
visibility:visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 800;
}
input:focus + label {
-webkit-transform: scale(0.97);
-ms-transform: scale(0.97);
transform: scale(0.97);
}
.about-name-h1 {
margin-top: 10px;
}
.about-wrapper {
width: 185px;
height: 227px;
position: relative;
}
.about-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 40px 0px;
background: rgba(255, 255, 255, 0.75);
visibility: hidden;
opacity: 0;
text-align: center;
text-transform:uppercase;
}
.about-overlay:hover {
padding: 70px 0px;
}
.about-wrapper:hover .about-overlay {
visibility: visible;
opacity: 1;
}
.about-name, .about-overlay {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.about-name {
padding: 15px 0px;
text-align: center;
border: 1px solid #e8e8e8;
border-top: 0;
font-size: 16px;
background: #ffffff;
margin:0px;
width: 183px;
cursor:pointer;
}
.about-name:hover {
background: #07B288;
color: #fff;
}
.avatar-frame {
border: 2px solid #07B288;
}
.avatar-frame, .avatar-frame img {
width: 120px;
height: 120px;
-webkit-border-radius: 60px;
margin: 0 auto;
/* Saf3+, Chrome */
border-radius: 60px;
/* Opera 10.5, IE 9 */
/*-moz-border-radius: 30px; Disabled for FF1+ */
}
<div class="about-wrapper">
<img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-president.jpg" alt="polaroid" />
<div class="about-overlay">
<h3>Founder</h3>
<div class="modal-about">
<input id="modal-about" type="checkbox" name="modal-about" tabindex="1">
<label for="modal-about">View Profile</label>
<div class="modal__overlay">
<div class="modal__box">
<label for="modal-about">✖</label>
<div class="avatar-frame">
<img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-me-president-circle.jpg" alt="">
</div>
<h1 class="about-name-h1">Garry Howell</h1>
<h2>Founder</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
</div>
</div>
</div>
</div>
</div>
<h4 class="about-name">Garry Howel</h4>