|
|
Copied To Clipboard!
<html>
<head>
<title>Account Image Accordion Bar</title>
<style>
* {
margin:0;
padding:0;
}
body {
background:#eee;
font-family:arial, verdana, tahoma;
}
#code{text-align:center;}
/* Begin Account Image Accordian Bar */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Phe0nix : https://developer.mozilla.org/en-US/profiles/Phe0nix : Creative Commons License == */
/* Time to apply widths for the accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
width:805px; height:320px;
overflow:hidden;
/* Time for some styling */
margin:100px auto;
box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/* A small hack to prevent flickering on some browsers */
.accordian ul {
width:2000px;
/* This will give ample space to the last item to move instead of falling down/flickering during hovers. */
}
.accordian li {
position:relative;
display:block;
width:160px;
float:left;
border-left:1px solid #888;
box-shadow:0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 0 25px 10px rgba(0, 0, 0, 0.5);
/* Transitions to give animation effect */
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
/*If you hover on the images now you should be able to see the basic accordian*/
}
/* Reduce with of un-hovered elements */
.accordian ul:hover li {width:40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width:640px;}
.accordian li img {
display:block;
}
/*Image title styles*/
.image_title {
background:rgba(0, 0, 0, 0.5);
position:absolute;
left:0; bottom:0;
width:640px;
}
.image_title a {
display:block;
color:#fff;
text-decoration:none;
padding:20px;
font-size:16px;
}
</style>
</head>
<body>
<div class="accordian">
<ul>
<li><div class="image_title"><a href="http://snapbuilder.com">KungFu Panda</a></div><a href="http://snapbuilder.com"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/tabs_and_accordions/img/3yiC6Yq.jpg"/></a></li>
<li><div class="image_title"><a href="http://snapbuilder.com">Toy Story 2</a></div><a href="http://snapbuilder.com"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/tabs_and_accordions/img/40Ly3VB.jpg"/></a></li>
<li><div class="image_title"><a href="http://snapbuilder.com">Wall-E</a></div><a href="http://snapbuilder.com"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/tabs_and_accordions/img/00kih8g.jpg"/></a></li>
<li><div class="image_title"><a href="http://snapbuilder.com">Up</a></div><a href="http://snapbuilder.com"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/tabs_and_accordions/img/2rT2vdx.jpg"/></a></li>
<li><div class="image_title"><a href="http://snapbuilder.com">Cars 2</a></div><a href="http://snapbuilder.com"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/tabs_and_accordions/img/8k3N3EL.jpg"/></a></li>
</ul>
</div>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_250.html">Account Image Accordion Bar Code Snippet</a> page. ]
</div>
</body>
</html>
|
