Here is the absolute best Sliding Image Script with CSS and HTML Code for you to use in your website projects for you and your clients. Don't be shy, get creative ,)

Copy and paste the CSS code below into the Head of your page:

<style> /* CSS code starts here - copy paste in the head section of your page */ .sliding { position: relative; float:left; overflow: hidden; margin:10px; padding: 0 10px; border: 1px solid #204d74; background: #337ab7; color: #f0f0f0; /* Just delete the next 3 lines if you do not need rounded border */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .sliding a { color: #f0f0f0; font-weight:bold; } .sliding, .sliding img { width: 300px; max-width:100%; height: 300px; z-index: 1; } .sliding img { position: absolute; top: 0px; left: 0px; border: 0px; } .clear { content: " "; clear: both; display: table; } .sliding .credits { position: absolute; right: 5px; bottom: 5px; font-size:9px; z-index: 0; } </style>


Copy and paste the HTML code below into the Body of your page:

<div class="sliding"> <img class="cover" src="" alt="" /> <h3>Title of the box</h3> Your content goes here! You can replace all the content inside the comment "Marker"! <a class="credits" title="by Mindful SEO Los Angeles" href="">by Mindful SEO Los Angeles</a> </div> <div class="clear"></div>


Copy and paste the JavaScripts code below into the Footer of your page:


<!-- javascript/jquery code starts here - copy this code before the body end tag --> <script src="//"></script> <script type="text/javascript"> $(document).ready(function(){ // To switch directions up/down and left/right just place a "-" in front of the top/left attribute $('.sliding').hover(function(){ $(".cover", this).stop().animate({top:'-300px',},{queue:false,duration:400}); }, function() { $(".cover", this).stop().animate({top:'0px',},{queue:false,duration:400}); }); }); </script> <!-- javascript code ends here -->

We hope that the Best Sliding Image Script with CSS and HTML Code, helps you out in your website proejcts.