More-info hover effect

 By: Kumar Siddharth    01:58  css, hireative, hover, more info   No comments

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!

Demo

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!

Read More

Hilreative Tricks

 By: Kumar Siddharth    10:29     No comments

Hilreative Tricks

How to center a single line text vertically in a div?

Give it a 'line-height' of same length as of its 'height'.

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.

Read More

3-D Buttons

 By: Kumar Siddharth    00:42  3d, 3d buttons, buttons, css, hilreative   No comments

Easiest way to make  3-D like buttons using CSS in just 3 steps!!!

If you own a website you gonna need buttons somewhere on your website like i have made down here for 'DEMO'. Here is the easiest way to make 3-D like buttons with CSS only. Here is the CSSDeck's live demo of buttons.

Demo

Hilreative Blueprint  A div with 'border-bottom' only,that will give it a 3-D kind of effect.
Change in size of div on hover as if it is being pressed(with a gradient to emphasize the pressing effect).

Lets start with our HTML code.

<div class="Container">
    <div class="button stopButton">
     Stop
    </div>
</div>
<div class="Container">  
    <div class="button goButton">
    Go
   </div>
<div>

We are designing two buttons one rectangular other oval,so just made two divs with their containers, now we are going to style them in CSS.('button' class is given for same styles to be added on two divs and for their individual styles there are two separate classes 'stopButton' and 'goButton')

1

.button{
width:200px;
height:80px;
line-height:80px;
text-align:center;
font-size:50px;
color:white; 
}

Hilreative Trick How to center a single line text vertically in a div?
Give it a 'line-height' of same length as of its 'height'.

2

.stopButton{
background:#E80101;
border-bottom:solid 5px #AB1806;
border-radius:5px;  
  }

.goButton{
  border-radius:50%;
  background:#12A3D3;;
  border-bottom:solid 6px #294694;
}

.Container{
 width:200px; 
  height:85px;
margin:50px auto;
  }

Note- Do not give large borders, button will loose its 3-D essence.

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.

3

.button:hover{
position:relative;
top:5px;
 left:5px;
border-bottom:none;
width:190px;
cursor:pointer;

}

.stopButton:hover{background: -webkit-linear-gradient(#E80101,#AB1806); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#E80101,#AB1806); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#E80101,#AB1806); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#E80101,#AB1806); /* Standard syntax */
  
}

.goButton:hover{
   background: -webkit-linear-gradient(#12A3D3,#294694); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#E80101,#AB1806); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#E80101,#AB1806); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#12A3D3,#294694); /* Standard syntax */
  
}

Cursor is made pointer on hover,border-bottom is removed,(just removing the border will not do the job, button should move in a way that it appears to be pressed).
 Width is reduced by 10 px(as button will go down it should appear little bit smaller) and positioned the button relatively 5 px from top and 5 px from left to give it a effect as if it is being pressed.

Now you must be thinking why we have given containers , here is why, we are  reducing button's size,had container not been there whole page would have been moved with the reduced width of the buttons. (see yourself by removing containers)
Finally a gradient is added to complete the design.

Wanna ask/say something, comment down here!

Read More

CSS 3-D Flip

 By: Kumar Siddharth    08:50  3d, animation, css, css 3d flip, flip, hilreative, transformatinon, transition   No comments

How to flip div using CSS 3-D transformation and transitions without using jquery/javascript??

If you are looking for something like this you are at right place, this is kind of a tutorial to do CSS 3-D flip.Okay lets get started with our HTML code.

Demo

<section class="container" >
    <div id="card">
       <figure class="front"></figure>
       <figure class="back face"></figure>
   </div>
</section>

Figure: Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

 Now lets start styling our HTML in CSS.

.container {
      width: 259px;
      height: 350px;
      position: relative;
      margin: 10px auto 40px;
      -webkit-perspective: 800px;
          -moz-perspective: 800px;
              -o-perspective: 800px;
                   perspective: 800px;
} 

To activate 3-D space, an element needs perspective. The value of perspective determines the intensity of the 3-D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.perspective: 2000; yields a subtle 3-D effect, as if we were viewing an object from far away.perspective: 100; produces a tremendous 3-D effect, like a tiny insect viewing a massive object. 

#card {
      width: 100%;
      height: 100%;
      position: absolute;
     -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
             -o-transition: -o-transform 1s;
                 transition: transform 1s;
    -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
     background:none;   }

Height and width are 100% to make sure that #card covers whole of its parent element(.container).

Position is absolute to remove it from natural flow DOM , it will be positioned to its relatively positioned parent element(.container).

Background:none is ensuring that when our card is flipping there is nothing behind it!

Note: Here we have given perspective to parent element and it is the correct way to do this,if we would have given perspective to each child element it would not have been giving the desired result.

So,to inherit the perspective in child elements preserve-3d is used.

It is recommended to use perspective with parent element. 

 #card figure {
      display: block;
      height: 100%;
      width: 100%;
     position: absolute;
     border-radius:10px;
     -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
                  backface-visibility: hidden;
      } 

Backface-visibility is hidden to hide the back of flipped div. 

#card .front {
 background: red;
 background:url("https://googledrive.com/host/0B7xKAUydVtQQdHlXY0xaNmM0c2c/4adbad8836129944.jpg");
 background-size:cover;
}

#card .back {
 background: blue;
 background:url("https://3d448791b95c609754b6a549c0a2a7058e411e6f.googledrive.com/host/0B7xKAUydVtQQdHlXY0xaNmM0c2c/The_Joker_Playing_Card_by_reignoffire86.jpg");
-webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
         -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
  } 

Initially back div is rotated 180 degree and will not be visible as backface-visibility is hidden.

Finally adding the core functionality that will do the thing.

.container:hover #card{
     -webkit-transform:rotateY(180deg);
    } 

Wanna ask/say something, comment down here!

Read More