bestprogrammerintheworld bestprogrammerintheworld - 1 month ago 6
CSS Question

Flickering effect when hovering title. Title over opacity background

Having this html:

<!DOCTYPE html>
<html>
<head>
<title>Image hover</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.gecoitems {list-style-type: none !important;margin:0 auto !important;width:1200px;}
.gecoitems .gecoitem {margin-bottom:20px;display:block;}
.gecoitems .column {float:left;}
.gecoitems {width:1200px;}
.gecoitems .gecoitem.normal {width:1200px;height:252px;background:#006505;color:#fff;}

/* links */
.gecoitems .gecoitem:hover {opacity:1;}
.image-listitem-wrapper {position:relative;}
.image-listitem-wrapper .title {position:absolute;top:40%;left:0;opacity:1.0;color:#ffffff;text-transform: uppercase;width:100%;text-align:center;font-size:35px;line-height:normal;}
.image-listitem-wrapper .title.hover {display:none;color:#000000;top:35%;}
.image-listitem-wrapper .title.hover .services {text-transform: lowercase;display:block;}

.gecoitems .gecoitem.wrapper-title.hover:hover {opacity:0.4;}
.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;}


.slow-fade {
opacity: 0.8;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}

</style>

</head>
<body>
<ul class="gecoitems">
<li>
<div class="image-listitem-wrapper default-image">
<a href="#" class="wrapper-title hover slow-fade gecoitem normal"></a>
<span class="title hover">TITLE<span class="services">Subtitle</span></span>
</div>
</li>
</ul>
</body>
</html>


I get almost what I want. When I hover the area I get opacity 0.4 background with a title above, but when I hover the title/subtitle I get a "flickering effect".I dont want this "flickering effect". How do I get rid of that? (I'm quite sure it's this:

.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {display:block;}
that's the issue but how do I solve this? I don't want anything top happen when I hover the title (just want the opacity 0.4 to "stay there")

A jsFiddle to explain further: https://jsfiddle.net/1rLzeht9/

If you want to downvote question, it's ok, but please tell why! :-)

Answer

You can try the following snippet, I changed some of the display:block to opacity:1, and added a z-index property to the .title

Also I moved your css, got rid of the body, meta etc tags for the purpose of this snippet

.gecoitems {
  list-style-type: none !important;
  margin: 0 auto !important;
  width: 1200px;
}
.gecoitems .gecoitem {
  margin-bottom: 20px;
  display: block;
}
.gecoitems .column {
  float: left;
}
.gecoitems {
  width: 1200px;
}
.gecoitems .gecoitem.normal {
  width: 1200px;
  height: 252px;
  background: #006505;
  color: #fff;
}
/* links */

.gecoitems .gecoitem:hover {
  opacity: 1;
}
.image-listitem-wrapper {
  position: relative;
}
.image-listitem-wrapper .title {
  position: absolute;
  top: 40%;
  left: 0;
  opacity: 1.0;
  color: #ffffff;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  font-size: 35px;
  line-height: normal;
  z-index:-1;
}
.image-listitem-wrapper .title.hover {
  opacity: 0;
  color: #000000;
  top: 35%;
}
.image-listitem-wrapper .title.hover .services {
  text-transform: lowercase;
  display: block;
}
.gecoitems .gecoitem.wrapper-title.hover:hover {
  opacity: 0.4;
}
.gecoitems .gecoitem.wrapper-title.hover:hover + .title.hover {
  opacity: 1;
}
.title:hover {
  opacity: 1 !important;
}
.slow-fade {
  opacity: 0.8;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}
<body>
  <ul class="gecoitems">
    <li>
      <div class="image-listitem-wrapper default-image">
        <a href="#" class="wrapper-title hover slow-fade gecoitem normal"></a>
        <span class="title hover">TITLE<span class="services">Subtitle</span></span>
      </div>
    </li>
  </ul>
</body>

You may also add pointer-events:none to the .title element, see This Fiddle. This removes the title being the target of mouse events

Comments