The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to have a button over an image which when click expands to the left to show more info. Re: how to have a button over an image which when click expands to the left to show more info.


here is the php code this basically creates a gallery. Now the section highlighted is where the image title comes up. This is hidden and then brought up to rest at the bottom of the image via CSS. This great however it comes up when you hover over the image fine however in top right I’d like to purchase button which expands towards the left when clicked revealing dropdown box and purchase button. This code is stored with in image description on wordpress nexgen application and works fine. I wish to work out how to via CSS do

1) Allow the button in the top right to work with out the image title being brought up at the same time. allow the rest of the image to active the title when hovered
2) produce a button top right which expands left or brings up a popup in the middle if latter is not possible

Template Page for the gallery overview
Follow variables are useable :
$gallery : Contain all about the gallery
$images : Contain all images, path, title
$pagination : Contain the pagination content

You can check the content when you insert the tag
If you would like to show the timestamp of the image ,you can use

show_piclens) { ?>

caption ?>

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);
margin: 0px;
padding: 10px;
float: left;

.ngg-gallery-thumbnail img {
filter: alpha(opacity=100);
-moz-opacity: .99;
opacity: .99;
background-color: #FF0000;

.ngg-gallery-thumbnail:hover {

.ngg-gallery-thumbnail img:hover {
filter: alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;

.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;

#figure:hover .Icaption {
width: 270px;
height: 22px;
opacity: 1;
bottom: 0px;

Hope this helps