Many times we need to present user details, and especially when there are a lot of users, like in a team, we need to give the details and yet to present it in a short way and obviously stylish one. In this tutorial we will build and style a user details interface usinf css custom animation and transitions.

First thing first, we build the html:

<div class="userboxwrapper">
	<img class="img-responsive" src="../images/manager-is.jpg">

	<div id="infomasker">
			<div id="facebookdiv"> 
					<p>
						Click it and follow me on facebook !!
					</p>
				<div class="arrow-down"></div>
			</div>
			<div id="googleplusdiv"> 
					<p>
						Click it and follow me on google !!
					</p>
				<div class="arrow-down"></div>
			</div>
			<div id="twitterdiv"> 
					<p>
						Click it and follow me on twitter !!
					</p>
				<div class="arrow-down"></div>
			</div>
			<div id="phonediv"> 
					<p>
						Click it and follow me on phone !!
					</p>
				<div class="arrow-down"></div>
			</div>
			<div id="emaildiv"> 
					<p>
						Click it and follow me on email !!
					</p>
				<div class="arrow-down"></div>
			</div>
			<h2>Ron Shtigliz</h2>
			<div class="userdesc"> 
				<p>
				Some description about the user. one can write here a bit of a text to describe the user !!
				</p>
				<div class="arrow-down"></div>
			</div>
			<div class="social">
				<a id="facebook" class="sociallinks" href="#"><i class="fa fa-facebook-official fa-1x"></i></a>
				<a id="googleplus" class="sociallinks" href="#"><i class="fa fa-google-plus-square fa-1x"></i></a>
				<a id="twitter" class="sociallinks" href="#"><i class="fa fa-twitter-square fa-1x"></i></a>
				<a id="phone" class="sociallinks" href="#"><i class="fa fa-phone-square fa-1x"></i></a>
				<a id="email" class="sociallinks" href="#"><i class="fa fa-envelope fa-1x"></i></a>
			</div>

		
	</div>
</div>

 Nothing like an image to make the user details more personal, so we use one.

In addition, we want to give at least little description. Here we can use the title of the user ( for example in a team ). We can also provide some details about his education or whatever we need.

And obviously today, it isn’t enough to provide just an email and a phone number. We need to provide some links to his social media pages, or even some description about them too. My thought here was to make the user click a facebook icon and a thought bubble will appear, either with a link or whatever is needed.

So now, that we have the html, we can style it. first the wrapping div, which function also as a mask and a holder of the user image:

.userboxwrapper{
  	width: 300px;
    height: 300px; 
    border: 15px solid rgba(255, 255, 255, 1);
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 9px #e6e6e6;
    margin: 0 auto;
    transition: border 0.3s ease-out ;
}

.userboxwrapper img{
	width: 100%;
}

 The important thing to notice here is the use of : overflow: hidden. that makes the div to function as a mask. everhting inside it will be visible and all that is placed outside will be hidden.

Notice also that we used 100% width on the image and that to make it responsive.

Now we will style the inner div:

#infomasker{
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);

    left: -300px; /*hideit -300px*/
	opacity: 0; /*hideit - 0*/
	transition: all 0.3s ease-out 0.5s;

}

 We position it absolute, and since the wrapper div position is relative, that means that the inner div is positioned in relation to its wrapper.

At the beggining we position it outside of the wrapper div, the mask, so it is not in view. We will use a custom animation to bounce it into view.

.userboxwrapper:hover{
	border: 2px solid rgba(255, 255, 255, 1);
}


.userboxwrapper:hover #infomasker{
	opacity: 1; 
	left: 0px;
	transition-delay: 0s; 
    animation: bounceright 0.9s linear;
}

 On hover we decreese the size of the wrapper div’s border. that create two effects at once: we have more inner room and it simulate a growing effect on the image.

Notice that in the seconf rule we hover on the wrapper div but animate the inner div.

I wanted to create the effect that the inner div enter from the right but is being bumpped against the right side of the wrapper div, so the custom animation is needed:

@keyframes bounceright{
    0% { transform: translate(-205px);}
    40% { transform: translate(-100px);}
    65% { transform: translate(-52px);}
    82% { transform: translate(-25px);}
    92% { transform: translate(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translate(0px);}
}

 The custom animation is actually really simple. we just move the inner div position. Until 92 percent it sort of slide in, but then we “shake” it a bit to create the effect of bouncing to the right.

The next step. We are styling the inner elements, and here we use regular transitions:

#infomasker h2{
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
	padding: 5px 0;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	position: absolute;
	bottom: 45px;
	left: 0;
	width: 100%;
	text-align: center;

	transition: box-shadow,bottom 0.5s ease-in-out 0.2s;
}

#infomasker div.userdesc{
	 color: #FFF;
	 padding: 1em 1.5em 1em 1em;
	 margin-top: 8em;
	 background-color: rgba(0,0,0,0.7);
	 opacity: 0;
	 position: relative;
	transition: all 0.5s ease-in-out 0.1s;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-top: 10px solid rgba(0,0,0,0.7);
	position: absolute;
	bottom: -10px;
	left: 45%;
}

 We want that the user description will appear when the mouse hover the name of the user. And it will look like a speech bubble, this is why we need the arrow down effect.

To get that effect we need to trigger the transition when the h2 is hovered but to make the speech bubble to appear. so:

#infomasker h2:hover{
	bottom: 55px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);

}

#infomasker h2:hover + div{
	opacity: 1;
	margin-top: 6em;
}

 The + sign means that in the html the speech bubble div MUST appear right after the h2.

Now to the social links. Let’s style them, and again we want a speech bubble to appear when they are clicked. In the speech bubble we can give more info or links to the user social pages.

#infomasker #facebookdiv,#infomasker #googleplusdiv,#infomasker #twitterdiv,#infomasker #phonediv,#infomasker #emaildiv{
	 color: #FFF;
	 padding: 1em 1.5em 1em 1em;
	 margin-top: 9.5em;
	 margin-left: 1em;
	 margin-right: 1em;
	 background-color: rgba(0,0,0,0.7);
	 text-align: center;
	 display: none;
	 position: relative;
	 border-radius: 5px;
}


#infomasker .social{
	background-color: rgba(0,0,0,0.7);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	padding: 0.5em 0;
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	text-align: center;
}

#infomasker .social a{
	text-decoration: none;
	color: #FFF;
	margin: 0.5em 1em;
}

#infomasker a.info{
	text-decoration: none;
	display: block;
	color: #FFF;
	background-color: red;
	text-align: center;
}

 The code is very simple and clear, i assume there is no need for more explanations. What we want now is to make the social speech bubble to appear when clicked, and for that we have jquery to the rescue:

	$("a[href^=#]").on("click", function(e) {
		e.preventDefault();
		var theonetopick = $(this).attr("id");
		var fullname = theonetopick + 'div';
		$("#"+fullname+"").fadeToggle("slow");
		return false;
	});

 We build the name of each speech bubble div, and we use fadeToggle to animate it.

In addition we use preventDefault and return false inorder to prevent the links to work like links usually work.

And we are done.

View Demo

2 responses to “Stylish User Details Interface”

  1. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a little bit, but instead of that, this is fantastic blog. A fantastic read. I’ll definitely be back.

    • Hey
      thanks for your comment. and there is a demo so you can see the whole effect.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.