Css hover from codepen goes berzerk if html is added above

I found a great codepen for displaying team members. The problem, when you add html above it, the hover effects go berzerk. You should only get hover effects when you hover over a person (which is exactly what happens in the original code pen: http://codepen.io/solutiondrop/pen/IqKhk)

<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<div class="wrapper--team">
<div class="l-container">

  <div class="team-grid">

    <div class="team-grid__member hover">
      <div class="member__info">
        <div class="center-vert-content">
          <h3 class="member__name">Robert Finkel</h3>
          <p class="member__title">Rootmaster</p>
          <a class="member__link" href="javascript:void(0)">Read More</a>
        </div>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/robert-finkel_2.jpg" alt="Robert Finkel">
    </div>

    <div class="team-grid__member hover">
      <div class="member__info">
        <div class="center-vert-content">
          <h3 class="member__name">Randy Mosher</h3>
          <p class="member__title">Alchemist</p>
          <a class="member__link" href="javascript:void(0)">Read More</a>
        </div>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/randy-mosher.jpg" alt="Randy Mosher">
    </div>

    <div class="team-grid__member hover">
      <div class="member__info">
        <div class="center-vert-content">
          <h3 class="member__name">BJ Pichman</h3>
          <p class="member__title">Operations Manager</p>
          <a class="member__link" href="javascript:void(0)">Read More</a>
        </div>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/mrch8596.jpg" alt="BJ Pichman">
    </div>

    <div class="team-grid__member hover">
      <div class="member__info">
        <div class="center-vert-content">
          <h3 class="member__name">Jacqueline Armanetti</h3>
          <p class="member__title">Brand Ambassador</p>
          <a class="member__link" href="javascript:void(0)">Read More</a>
        </div>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/jacqueline-armanetti.jpg" alt="Jacqueline Armanetti">
    </div>

    <div class="team-grid__member hover">
      <div class="member__info">
        <div class="center-vert-content">
          <h3 class="member__name">Romy Seth</h3>
          <p class="member__title">Analyst</p>
          <a class="member__link" href="javascript:void(0)">Read More</a>
        </div>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/romy-seth.jpg" alt="Romy Seth">
    </div>

  </div>

</div>
</div>

However, when I add a little html above the original html in my own implementation, (like the two divs below the hover) behavior breaks.

<div></div>
<div><span><br>if you hover on this text on the white region over the images,
weird stuff happens. <br>The javascript should only be triggered if you  hover over a person (scroll down to see)</span>
</div>

After I add my little divs above the fancy codepen stuff, the pages provides information when you hover on the new, preceding white-region, instead of when you hover over the team member. Here is the codepen showing the broken version, with the little bit of preceding html: http://codepen.io/ihatecoding/pen/zqqyVj .

Why on earth could this be happening and how do I fix it?

Answers


The problem is with your .member-info class... Use chrome developer tools to easily debug this problem.

CodePen: http://codepen.io/anon/pen/wGGNmd#0

Your CSS:

.member__info {
  color: #fff;
  height: auto;
  width: auto;
  opacity: 0;
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: rgba(0, 0, 0, 0.85);

  backface-visibility: hidden;
  transition: opacity 0.4s ease-in-out;
}

my recommendation:

.member__info {
  color: #fff;
  height: 184px;
  width: 184px;
  position: absolute;
  opacity: 0;
  background: rgba(0, 0, 0, 0.85);
  backface-visibility: hidden;
  transition: opacity 0.4s ease-in-out;
}

Need Your Help

Cannot open PDF files in AIR app on Mac OS Yosemite error 3204

macos actionscript-3 pdf air flash-builder

I am having trouble opening a PDF file in adobe air application on Mac OS 10.10.4. I already installed adobe reader 11.0.12 and air on mac.

Checking if a channel has a ready-to-read value, using Go

go channel

How do I check if a channel has a value for me to read?