Photo Sliding Gallery css – DesignSavvy: Unleashing Creative Brilliance https://www.searchenginegenie.com/web-design-blog Inspiring Designs, Transformative Insights Fri, 20 Apr 2012 09:07:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://www.searchenginegenie.com/web-design-blog/wp-content/uploads/2024/05/cropped-SEG-1-32x32.pngPhoto Sliding Gallery css – DesignSavvy: Unleashing Creative Brilliancehttps://www.searchenginegenie.com/web-design-blog 32 32 Photo Sliding Gallery using HTMLhttps://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/ https://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/#comments Fri, 20 Apr 2012 08:53:03 +0000 http://www.searchenginegenie.com/web-design-blog/?p=1657 #sliding{padding:0;margin:0 0 40px 0;list-style-type:none;overflow:visible;width:495px;height:240px;background:transparent url(https://www.searchenginegenie.com/web-design-blog/wp-content/uploads/2012/04/back.jpg)}#sliding li{float:left}#sliding li a{display:block;height:240px;width:28px;float:left;text-decoration:none;border-right:1px solid #fff;cursor:default}#sliding li a img{width:28px;height:240px;border:0}#sliding li a:hover{background:transparent;width:320px}#sliding li a:hover img{width:320px}

Final Preview:

Step:1 Open a new HTML Document in dreamweaver.

Step:2 Paste the following code in the HTML Document.

<ul id="sliding">
<li><a href="#nogo">
<img src="pic1.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic2.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic3.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic4.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic5.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic6.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic7.jpg"/></a></li>
</ul>

Step:3 Create embedded <style> style below <head> tag. Add the following CSS Code:

<style>
#sliding {
padding:0;
margin:20px 0 0 20px;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
background:#fff url(back.jpg);
}
#sliding li {
float:left;
}
#sliding li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#sliding li a img {
width:28px;
height:240px;
border:0;
}
#sliding li a:hover {
background:#eee;
width:320px;
}
#sliding li a:hover img {
width:320px;
}
</style>

Step:4 Place required images inside your HTML file folder.

Now run the Program.

]]> https://www.searchenginegenie.com/web-design-blog/photo-sliding-gallery-using-html/feed/ 1