hidden ) continue; ?>
columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
==================================================================================
The CSS code is as follows the I caption class currently brings up the title and figure call is related to the image the rest of the CSS is the layout of the gallery and class to highlighting an image on hover. This has been customised from Nextgen set-up so most of this and PHP is not my original code
.ngg-spacing {
float: left;
margin-bottom: 20px;
margin-right: 20px;
}
.ngg-gallery-thumbnail {
float: left;
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204);
border-style:solid;
border-width:1px;
color:inherit;
margin: 0px;
padding: 10px;
float: left;
}
.ngg-gallery-thumbnail img {
filter: alpha(opacity=100);
-moz-opacity: .99;
opacity: .99;
border-color:#000000;
border-style:solid;
border-width:0px;
color:inherit;
vertical-align:top;
background-color: #FF0000;
}
.ngg-gallery-thumbnail:hover {
border-color:#000000;
}
.ngg-gallery-thumbnail img:hover {
filter: alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;
border-color:#000000;
}
.ngg-gallery-thumbnail-box {
display: inline;
}
#figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin:0px !important;
}
#figure:hover {
opacity: 1;
}
#figure .Icaption {
position: absolute;
background: white;
background: rgba(255,255,255,0.75);
color: black;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
filter: alpha(opacity = 75);
bottom: -30%;
width: 270px;
height: 22px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom:5px;
}
#figure:hover .Icaption {
width: 270px;
height: 22px;
opacity: 1;
bottom: 0px;
}
============================================
Hope this helps