disissid

Hilariously creative, more information hover effect with CSS!!! Searching for a cool hover effect to show up more information on your image or any div. You are at the right place. Imagination is more important than knowledge. -Albert Einstein Let us first imagine and make a hilreative blueprint of what we gonna make, 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> 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. .container{ margin:5px auto; background:url('http://3.bp.blogspot.com/-B7ORnKMRdno/U6uhv-xUFxI/AAAAAAAAB10/4eCsO4Gct0U/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. .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 Hilreative thing. .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! you have made a hilariously creative div with more-info hover effect!! original article do like our facebook page.

@@pamamolf welcome do like our facebook page for future updates!! https://www.facebook.com/hilreative

welcome @ jackoLAD1998 do like our facebook page for future updates!! https://www.facebook.com/hilreative thanks

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. 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') .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'. .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. .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 hilreative design. original article with demo http://hilreative.blogspot.in/2014/06/3-d-buttons.html For more such tutorials, join us on facebook https://www.facebook.com/hilreative

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. <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. http://hilreative.blogspot.in/2014/06/css-3-d-flip.html