JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="user-options">
  <li>
    <div class="role-card-talent">
      <img class="role-photo" src="http://leongaban.com/_stack/images/registration_talent_tile.png" />

      <div class="hover_controls" style="display:block;">

        <a href="#" class="fbLoginBtn"><img src="http://leongaban.com/_stack/images/registration_signin_fb.png" /></a>

        <div class="learn_about_pages learnMoreLink">
          <a href="#"><img src="http://leongaban.com/_stack/images/registration_info_icon.png"/>Learn More</a>
        </div>

      </div>
    </div>
  </li>
  <li>
    <!-- Code below from http://stackoverflow.com/questions/7867694/div-hovering-over-another-div-height-width -->
    <div id="content">
      Content goes here.
      <div class="hover">
      </div>
    </div>
  </li>
</ul>

CSS

body {
  background: #333;
}

ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
}

#user-options li {
  position: relative;
  float: left;
  width: 30%;
  margin: 1%;
  text-align: center;
  padding: 5px;
  background: url("http://leongaban.com/_stack/images/one_background.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
}

#user-options li img.role-photo {
  width: 95%;
  height: 95%;
  padding-top: 5px;
}

.role-card-talent {
  position: relative;
  background: red;
}

.hover_controls {
  position: absolute;
  margin: 0;
  top: 5px;
  left: -5px;
  padding: 5px;
  /*padding-top: 20px;*/
  width: 100%;
  height: 100%;
  /*min-height: */
  text-align: center;
  color: #409ad5;
  font-size: 0.875em;
  font-weight: bold;
  background: rgba(255, 255, 255, .5);
  background-size: 100%;
}

.hover_controls img.fb-signin {
  width: 100%;
}

/* Code below from http://stackoverflow.com/questions/7867694/div-hovering-over-another-div-height-width */

#content {
  position: relative;
  background: blue;
}

.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: green;
}

JavaScript

$(document).ready(function() {

  $(function() {

    /* ROLE BUTTON */
    $(".role-card-talent").mouseover(flipTalentCard);

    function flipTalentCard(event) {
      //alert('flip talent');
      // Code to show hover state
    }

  });

});