Wednesday 2 July 2014

More-info hover effect

Hilariously creative,  more information hover effect with CSS!!!


Have a grid-based layout on your website this tutorial is for you, have images on your website this tutorial is for you, lets cut it short, you are a web designer this tutorial is for you. 

So what this tutorial is about, this tutorial will guide you to design a cool hover effect to show more information over an image or any div with HTML/CSS only. 

We will divide our code into short snippets and will understand each one of them in detail.(assuming that you do have basic knowledge about HTML/CSS, we will not look into VERY basic stuff, however if you wanna ask about one you can comment)


"Imagination is more important than knowledge."
       -Albert Einstein

You should imagine first before starting any thing, you should have an idea of what you are going to design. Let us think,imagine and make a hilreative blueprint of what we gonna design and what we gonna need to do so!






Hilreative Blueprint  
A more info box that will be hidden initially and will show up on hover with our information.
Now that can be done by translating the info box out of the container initially and by translating back it on hover.



Lets start with our HTML code.

<div class="container">
  <div class="moreInfoBox">
    <div class="category">CSS</div>
    <div class="moreInfo">Easiest way to make  3-D like buttons           using CSS in just 3 steps!!!</div>
    <div class="author">By: Kumar Siddharth</div>
  </div>

</div>
    


We have made a info box which is overlapping our main container. Now lets style them both.
Hilreative Trick Transformation VS Transition
Transformations are different form of animations which transforms(changes) the physical appearance of an element(viz. scaling,rotating,translating).
Whereas a transition property initiates any change applied on 'change of state'(viz. on click,on hover etc) and fill in between appearances of element all by itself.



1
.container{
  margin:5px auto;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOU-IUbCcM42lWCP1l5w3XG-OioUAmtCQi7S5fVgxqiSnw2TkLj5lwVaeqA8NdpabSw6PNoo2amW4Lk-wmzaio606ZqHFzHMC9ow5HH5keBvSAW8FuomBw_fY_8YGpvEDfVZQ72HiXrc0/s1600/3dbuttons.PNG');
  background-size:cover;
  background-repeat:no-repeat;
  border:solid 2px #3c404b;
  width:320px;
  height:231px;
  border-radius:5px;
  overflow:hidden;
}

.moreInfoBox{
  color:white;
  background:rgba(245,245,245,0.5);
  width:100%;
  height:100%;
  transform:translateX(-322px);
  transition:transform 1s ease-in-out;
  position:relative;
  font-size:25px;
}




Hilreative Trick How to center a div horizontally?
Give top and bottom margin as per your requirement but right and left,'auto' so that it will automatically adjust itself to the center.

Overflow is hidden to hide any element going out of 'container' div(its parent element).
Initially 'moreInfoBox' is translated out of the 'container' to left.

Background is given with opacity of '0.5' to show the context of information being shown.

Note: I have not used any kind of vendor prefixes for the sake of simplicity, do use them with your browsers,especially with the transformation and transition properties.


2
.category{
  padding:5px;
  background:#686868;
  transform:translateY(-45px);
  transition:transform 1s ease-in-out 1s;
}

.moreInfo{
  padding:5px;
  margin-top:20px;
  color:black;
}

.author{
  padding:5px;
  background:#EC5D93;
  position:absolute;
  bottom:0px;
  width:100%;
  box-sizing:border-box;
  transform:translateY(45px);
  transition:transform 1s ease-in-out 2s;
}

All the information in our info box has been styled now,name of the 'category' has been translated upwards and the 'author' downwards from their initial position which on hover will come back to their original position.

So finally lets do that thing. 



3
.container:hover .moreInfoBox,.container:hover .category, .container:hover .author{
  transform:translateX(0px);
}

On hovering over the container the info box along with information will come back to their original position via transition and transformation properties given to each element.


Yeah! that is it! we are done!

Wanna ask/say something, comment down here!
Share This Article, Choose Your Platform!
I have completed this article in hours with a lot of effort, you have to just click a button to get updated with more such articles in future.Like our facebook page.

No comments:

Post a Comment

© Hilreative All rights reserved | Theme Designed by Seo Blogger Templates