Mini-Profile - click or hover to reveal information

(1 review)

June 7, 2018

This is a base for a mini profile that you can either hover over or click onto, to reveal more information about the author. I built this in response to the problem created by hovers: they do not necessarily work for iOS devices. Adding a click function allows all users to access the information usually found with a hover.

Type:

Preview - Codepen

I'm using the checkbox functionality to achieve this, no need for javascript!

You need to post the following HTML into the appropriate place in the postbit template for MYBB, or in the miniprofile template for JCINK:

<div class="miniprofile-container">
   <label class="miniprofile-label">
   <input type="checkbox" />
     <div class="miniprofile-front">{$post['useravatar']} for MYBB or <!-- |avatar| --> for JCINK</div>
     <div class="miniprofile-back">{$post['user_details']} or whatever you want for JCINK</div>
   </label>
   <div class="miniprofile-name">
     Name 
   </div> 
</div>

The div: miniprofile-front contains the avatar.

The div: miniprofile-back contains the user information. For JCINK, you simply put the information straight into here. For MYBB, you need to put in the user details variable and then edit the postbit_author_user template.

Next is the CSS! You can paste this into the usual places. I've inserted comments to explain what some of the properties are for.

.miniprofile-container {
  text-align: center;
  width: 250px;
}

.miniprofile-container input {
  display: none; /* hide the checkbox */
}

.miniprofile-label {
  display: block; /* ensure the label covers the entire avatar */
  height: 400px; /* same height as the avatar */
  width: 250px; /* same width as the avatar */
  position: relative; /* necessary so that we can use absolute on miniprofile-back */
  cursor: pointer; /* turn the cursor into a hand so that users know that they can click on the avatar */
  overflow: hidden;
  transition: 2s;
}

.miniprofile-front {
  height: 100%;
  width: 100%;
}

.miniprofile-back {
  background: rgba(0,0,0, .5);
  color: #fff;
  height: 400px; /* same height as the avatar */
  width: 250px; /* same width as the avatar */
  position: absolute; /* we need the back to occupy the same space as the avatar! */
  left: 0; /* occupy the same space as the avatar */
  top: 0; /* occupy the same space as the avatar */
  opacity: 0; /* hide the back! */
  transition: 1s;
}

:checked ~ div.miniprofile-back,
.miniprofile-label:hover .miniprofile-back {
  opacity: 1; /* show the back! */
}