how to have a button over an image which when click expands to the left to show more info.

[locka]

Guys I’m in the process of design a web site for my photography via wordpress. however I need some css help

I currently have photos that when I hover over them the title slides up from the bottom this works great. However I now wish to create a small purchase button in top right. I wish the button to expand to the left when clicked to then show button and drop down box these are already working via plugin and I can display those easily enough once the code is sorted

I just need some help on how to get the image to appear at the top right of the photo and then expand to the left. so in a similar position to how the close button is on normal jquery popup.

I would show my code but There is a lot of it most related to wordpress plugin I’m using for the gallery (Nexgen).

[locka]

Can’t see how I edit my message I forgot to say Id like to keep this just to CSS please if possible

[Alen]

You can create [CodePen](http://codepen.io/pen/) with generated HTML and CSS.

[locka]

not sure codepen will help since it php css however ill try and post the code on here and highlight the important bits

[Paulie_D]

Shouldn’t be too difficult with a pseudo element. I’m on my phone right now but will take a look when I can.

[locka]

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
**/
?>

slideshow_link ?>”>
slideshow_link_text ?>

show_piclens) { ?>

piclens_link ?>”>

imageURL ?>” title=”alttext ?>” thumbcode ?> >
hidden )
{ ?>
alttext ?>

**_

caption ?>

[Paulie_D]

PHP doesn’t help.

[locka]

ok what do you need in stead since this combined with the CSS is what generates the page with in wordpress

[Paulie_D]

We need the HTML and CSS relating to the figure, caption and image effect. A reduced case in Code pen would be ideal.

Otherwise I can do a small example based on what I can see.

[locka]

paulie_d small example would help as might be getting my code muddled and what I’ve manged so far is by no means how id like it.

Currently I’ve managed to get an what I need to slide out from the left kinda (wrong place but that’s a starting point) but at the same time the title of the image comes from the bottom. I’m wondering if I need to use Z-index and have them in this order

1) Image

2)Title

3) Purchase Button

would I then be write in thinking that area where purchase button is would take precedent, then the rest of the image area would active the title?

[Author]

Posts