Miniprofile (Odds and Ends)

In this example below you will see how to do a Miniprofile (Odds and Ends) with some HTML / CSS and Javascript

This awesome code was written by Kuroya, you can see more from this user in the personal repository.
You can find the original code on
Copyright Kuroya ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Miniprofile (Odds and Ends)</title>
      <link rel="stylesheet" href="css/style.css">



  <link href='' rel='stylesheet' type='text/css'>
<center><div class="mpall">
  <img src="" class="mplarge">
  <div class="mpunder">
    <div class="mptop">
    <img src="">
      <i style="margin-top: 5px;">0000</i>
  <div class="mpname">Firstname "Alias" Lastname</div>
  <div class="mpgroup">( administrator )</div>



/*Downloaded from */
.mpall {
  width: 250px;

.mpname {
  font-family: 'Josefin Sans';
  font-size: 15pt;
  background-color: rgba(255,255,255,.8);
  border-bottom: 2px solid #000;
  padding: 5px 0px;
  margin-top: -225px;
  position: relative;
  z-index: 3;

.mpgroup {
  font-family: 'droid sans';
  font-size: 12pt;
  background-color: rgba(255,255,255,.8);
  padding: 3px 0px;
  margin-bottom: 160px;
  position: relative;
  z-index: 3;

.mplarge {
  position: relative;
  z-index: 1;

.mpunder {
  margin-top: -354px;
  height: 350px;

.mpunder .mptop {
  height: 0px;
  overflow: hidden;
  transition: .6s;
  background-color: rgba(255,255,255,.8);
  position: relative;
  z-index: 5;

.mpall:hover .mpunder .mptop {
  height: 125px;

.mpunder .mptop img {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  border: 5px solid #fff;
  float: left;
  margin-left: 10px;

.mpunder .mptop i {
  font-family: oswald;
  font-size: 16pt;
  display: block;
  font-style: normal;

.mpunder .mptop b {
  font-family: oswald;
  font-size: 10pt;
  line-height: 20px;
  font-weight: normal;
  display: block;
  background-color: #000;
  color: #fff;
  width: 110px;
  float: right;
  margin: 2.5px 0px;
  margin-right: 10px;