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(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:



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!

 

18 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. thanx, this is very Informational Post to Read now I am Waiting for your next post
    Descolab

    ReplyDelete


  4. nice post, Can anyone give some suggestions to improve my blog?
    http://mobilebuzzmurali.blogspot.in/ Thank you

    ReplyDelete
  5. very informative articular, Thanks for sharing this
    http://mybloggertools.com/

    ReplyDelete
  6. such information can be very useful for many people who know such thongs.http://proof-reading.services/

    ReplyDelete
  7. Get 1000+ Likes On Facebook Photos And Status
    Working 100% Visit:- www.Megsta.com
    -------------------------------------------------------
    Features:
    -------------------------------------------------------
    Facebook Auto Liker
    Facebook Auto Follow
    Facebook Auto Page Post Liker
    Facebook Auto Commenter Liker
    Facebook Auto Requests
    Facebook Auto Commenter
    Facebook Fan Page Liker
    No Skip Ad Problem
    No Spam,100% Working
    ------------------------------------------------------
    Visit:- www.Megsta.com

    ReplyDelete
  8. facebook auto liker - auto like - auto

    Facebook comes as a great solution to stay connected with friends as well as it is helpful for all business need. It's pretty much sure that many businesses are relying on this method and getting an enormous number of benefits. Mainly, it helps with the online success of the business and plays an effective role in SEO strategy. Facebook Post likes matters here but getting a good number of likes just after the start is quite tiring and typical. Well, we can help out by providing genuine likes on your posts.

    ReplyDelete
  9. Thanks to share with us you information this information very usefull to all you can take more information this link

    garmin.com/express
    www.garmin.com/express
    avast login
    my.avast.com
    avg.com/retail

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Hire Glamorous Luxury Udaipur Escorts Models For Sexual Night
    If You Are Searching Beautiful Busty Udaipur Escorts And Matured House Wife Get Full Sex In Own Flat And Your Flat Booking Short Time. We Have A Lot Of Horny Udaipur Call Girls in Our Team. Who Can Give Massive Sexual Pleasure To Their Client's.
    Stunning Udaipur Call Girls
    Udaipur Escorts

    ReplyDelete
  12. Indore is a famous place for receiving Indore Escorts. Here call girls are categorized into many categories, you can contact us on our website to get them. Call Girls in Indore

    ReplyDelete
  13. Mizoram Escort can provide a new rent of lifestyles to you emotionally
    kolasib Escorts

    Nagaland Escort can additionally heal your bothered intercourse life.
    mon Escorts

    ReplyDelete
  14. Through these grimy talks, these ahmedabad escorts will sort out what requests most to you and would then be accountable for dealing with you genuinely and explicitly and play out an assortment of fulfilling sexual escort administrations for your bliss and actual fulfillment
    navsari escorts
    panchmahal escorts
    patan escorts
    porbandar escorts
    surat escorts

    ReplyDelete
  15. . Our Kolkata Escorts Service is the main motivation for people satisfaction since young ladies who work with us are explicitly unsatisfied. Then again, men are troubled in their life also. You can make some great memories with them in film city Kolkata just on the off chance that you employ well proportioned whores from Angles of Kolkata. On the off chance that you have guts to move toward whores, at that point they will be your optimal ladies of the night.
    mountabu escorts
    alipurduar escorts
    bankura escorts
    birbhum escorts
    cooch-behar escorts

    ReplyDelete
  16. Our escorts services in Jaipur will be the best at what they're doing. We largely encounter the guys of who are tired of the everyday routine, dull fun lifestyle & who desire something fresh in their physical connection then they could hire our call girls from our Jaipur location escorts groups.
    Jaipur escorts, escorts in jaipur, jaipur call girls, jaipur escort service, jaipur russian escorts, escort service jaipur, jaipur cheap escorts, female escort service in jaipur

    ReplyDelete
  17. Thanks for sharing such informative blog. It really helped me a lot to learn new things about SEO. Keep on sharing informative and useful stuffs. Great blog!
    seo service in chennai

    seo services in chennai

    ReplyDelete