Add transparent overlay over a text or image box

ThemeBurn SupportForumsOpenCart ThemesPavilion OpenCart ThemeAdd transparent overlay over a text or image box

This topic has been marked as resolved.

On my product page, I would like to put a transparent overlay with the buy button and the price over the gallery or image. Basically, the buy button should be in the lower, right corner of the gallery. The gallery would be full width showing the picture.

So basically something like this: http://jsfiddle.net/q86ntqh5/

Is there a way to do that with Bootstrap or otherwise? Editing the tpl files?

Thanks,
Axanne

  • This reply was modified 2768 days ago by  axanne.
 axanne
September 26, 2016 at 10:57 pm #51460
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
October 1, 2016 at 12:11 am #51614

Fabulous! Thanks for the hints.

One problem: Add to cart doesn’t have a tab, where I could add additional classes to it.

And is it possible to group several blocks into one block, similar to tabs/accordion block with “sub-blocks”, just without any effects? Would help to group blocks together and apply one style to them.

 axanne
October 11, 2016 at 10:18 pm #52010

Hi,

1) Each system block has a unique class that you can use. The class of the “Add to cart” system block is:

tb_wt_product_add_to_cart_system

2) There is a Block group block in Page Builder already. It is available from BurnEngine 1.1.0.

http://i.imgur.com/Rh8w8Kt.png

BR,
ThemeBurn team

October 14, 2016 at 4:59 pm #52120

Ah, ok. Thanks! Works already better.

Applied the 1.1.1 Update and found the block group module. Applied to that module the suggested custom style with


.price_overlay_product_page {
  position: absolute;
  right: -10%;
  bottom: 15%;
  z-index: 1;
}

The result is, that it is at the desired position at the lower right side. However, something seems to be wrong with the max-width calculation, as this mentioned block is expending to the end of the right side. See URL

How can I specify max-width or prevent that shown behaviour?

 axanne
October 15, 2016 at 7:16 pm #52174

Hi,

You could try to use pixels instead % and set some max-width as there is no such value by default.

BR,
ThemeBurn team

October 18, 2016 at 12:05 am #52232
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.