Get Latest Tricks Alert Daily
Follow Readers

Beautiful Slidebox with css style!


SHARE:

slidebox
After a hardwork I created a slidebox which slides images right to left and left to right when mouse hover on the images like a gate opening. This is a awesome Beautiful Slidebox for blogger or website. This slidebox designed with css only, most of peoples are using java or jquery scripts for the slide but this scripts will slow down your blog which results site is slow to open,
but here with slidebox there is no scripts are added and no extra coding just using Css and images. The features of slidebox which will cover your background text as a java expanding script. for example in some cases when we click a link they will exapand all links or text content.


But the slidebox will smooth slide image to open your background content text by sliding image both sides like gate opening. The use of slidebox you can hide your background content text. When a visitor mouse hover on the image it will show the background content text by sliding images right to left and left to right like gate opening. Most of using this slidebox in about us pages or contact us pages.

Adding Slidebox to blogger post or pages

If you like to show this only on a single page then you copy and paste the code in the post area
other wise add this css code in stylesheet

If your adding this css code to stylish sheet then remove this <style> & </style> tags from css code and add above ]]></b:skin>

Slidebox css code



<style>
.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(http://3.bp.blogspot.com/-PdoCkxEiWa8/UWkFWUyQ57I/AAAAAAAACbM/sdBaHJgiBZk/s320/right+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(http://4.bp.blogspot.com/-7Iu4ZEl25nw/UWkFWQhp_4I/AAAAAAAACbI/LBI6YLMU1hk/s1600/left+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>


Html Slidebox code



<div class="Slidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Your CONTENT TEXT GOES HERE
</div>



Slidebox customization



Change Width of slidebox 590px replace with your own
change height of slidebox 282px replace with your own
changing Background color #f7f7f7 Rplace with your own color or try our Html Color Generator


Changing Images

Canging Right Side image Replace (http://3.bp.blogspot.com/-PdoCkxEiWa8/UWkFWUyQ57I/AAAAAAAACbM/sdBaHJgiBZk/s320/right+gate.png) with your image link

Change Left side image Replace (http://4.bp.blogspot.com/-7Iu4ZEl25nw/UWkFWQhp_4I/AAAAAAAACbI/LBI6YLMU1hk/s1600/left+gate.png)with your image link

Note: Images size should be in pixles
width 303 & heigh 302





SHARE:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

6 comments:

  1. A color value may either be a hexadecimal number or color names. Color numbers are prefixed by a hash mark. The color names are case-insensitive.

    [HTML Color](http://www.willvick.com/HTML/HTMLColor.aspx)

    [HTML Color Examples](http://www.willvick.com/HTML/HTMLExampleColor.aspx)

    [HTML Tutorial with examples](http://www.willvick.com/HTMLTutorialwithExamples.aspx)

    ReplyDelete
  2. check this also

    My Blogger Tricks http://www.myblogtools.com

    ReplyDelete
  3. I had visited your website which was really good Plastic Manufacturer

    ReplyDelete
  4. thanx, this is very Informational Post to Read now I am Waiting for your next post
    Descolab

    ReplyDelete