Beautiful Slidebox with css style!

SHARE:

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.

DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvcVsMqYSWRVrWqvqJaG5tFxKDu1awPZsI8aFheCA9oDEhw647_BgodK-f0W-ykr2Ot32vt0AJTbG60LBXC2Z1ZmOm3s1ao0eMILiZ1h9_DNAApkyD9DmdIoLJU70oFziGSMOdoXUGXJ5/s320/right+gate.png)#DBDCDE;

border:1px solid #F0F0F0;

}

.slide_in .right_gate {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YWm7fnDGqeAfnvEQ3YK4SXdlPAaL9HRHb0c-0DJoLvzLJsoZsi1WqVgxETjSuzTDBhrv0Y6upaDR5dqQSeVaMmWY964SSy4DDEs4jRF0zQ-90Pd4GrepZhRWzS0pewnFBUFbG1AKSLlT/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 (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvcVsMqYSWRVrWqvqJaG5tFxKDu1awPZsI8aFheCA9oDEhw647_BgodK-f0W-ykr2Ot32vt0AJTbG60LBXC2Z1ZmOm3s1ao0eMILiZ1h9_DNAApkyD9DmdIoLJU70oFziGSMOdoXUGXJ5/s320/right+gate.png) with your image link

Change Left side image Replace (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YWm7fnDGqeAfnvEQ3YK4SXdlPAaL9HRHb0c-0DJoLvzLJsoZsi1WqVgxETjSuzTDBhrv0Y6upaDR5dqQSeVaMmWY964SSy4DDEs4jRF0zQ-90Pd4GrepZhRWzS0pewnFBUFbG1AKSLlT/s1600/left+gate.png)with your image link

Note: Images size should be in pixles

width 303 & heigh 302

SHARE: