95 lines
1.9 KiB
Smarty
95 lines
1.9 KiB
Smarty
|
{assign var=IMGWIDTH value="194"}
|
||
|
|
{assign var=IMGHEIGHT value="288"}
|
||
|
|
|
||
|
|
{literal}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Outer div for image container */
|
||
|
|
.boxgrid{
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
/* float:left; */
|
||
|
|
background:#161613;
|
||
|
|
border: solid 0px #8399AF;
|
||
|
|
width: 194px;
|
||
|
|
height: 288px;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
.boxgrid img{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inner div for sliding content */
|
||
|
|
.boxcaption{
|
||
|
|
position: absolute;
|
||
|
|
width: 174px; /* note: 100% doesn't work here */
|
||
|
|
background: #000;
|
||
|
|
opacity: .8;
|
||
|
|
/* For IE 5-7 */
|
||
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||
|
|
/* For IE 8 */
|
||
|
|
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||
|
|
|
||
|
|
padding: 0 10px 10px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inner content styling */
|
||
|
|
.boxcaption h3 {
|
||
|
|
font-size: 12pt;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
margin: 0;
|
||
|
|
padding: 10px 0 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.boxcaption div, .boxcaption h4, .boxcaption a {
|
||
|
|
font-size: 10pt;
|
||
|
|
color: #ddd;
|
||
|
|
padding: 10px 0 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Start position for actions */
|
||
|
|
.boxcaption .caption {
|
||
|
|
top: 220;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
Event.observe(document, 'dom:loaded', function() {
|
||
|
|
// setup initial slider position based on height of h3 tag (plot)
|
||
|
|
$$('.boxcaption').each(function(el) {
|
||
|
|
el.setStyle({top: (288 - el.down('h3').getHeight())+'px'});
|
||
|
|
});
|
||
|
|
|
||
|
|
// unique identifier for queue scope
|
||
|
|
var elid = 1;
|
||
|
|
|
||
|
|
$$('.boxgrid.caption').each(function(el) {
|
||
|
|
elid++;
|
||
|
|
|
||
|
|
el.observe('mouseenter', function(e) {
|
||
|
|
var el = this.down('.boxcaption');
|
||
|
|
var dy = el.getHeight() - el.down('h3').getHeight();
|
||
|
|
new Effect.Move(el, {duration: 0.1, x: 0, y: -dy, mode: 'relative' //});
|
||
|
|
,queue: { position:'end', scope:'s'+elid }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
el.observe('mouseleave', function(e) {
|
||
|
|
var el = this.down('.boxcaption');
|
||
|
|
var dy = el.getHeight() - el.down('h3').getHeight();
|
||
|
|
new Effect.Move(el, {duration: 0.1, x: 0, y: dy, mode: 'relative' // });
|
||
|
|
,queue: { position:'end', scope:'s'+elid }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{/literal}
|