transparent box

Resolved olsbor
(@borgeolsen)

9 years ago

Great plugin, been using the Pro version for some time now.

I want to make my boxes transparent, somewhere between 50 – 75% then less as you mouse over them.

See my boxes here:
http://harstadhavn.no/tjenester/

Is this possible to do?

Tnx!

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author wpshopmart
(@wpshopmart)

9 years ago
HI,

Please add below custom cs in your colrbox custom css filed –
```
#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel {
    background: rgba(239, 239, 239, 0.6) !important;
}
#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel-heading {
    background: rgba(239, 239, 239, 0) !important;
}
#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel-body {
    background: hsla(0, 0%, 94%, 0) !important;
}
```
Try it and then let me know.

Thanks
- This reply was modified 9 years ago by wpshopmart.
Thread Starter olsbor
(@borgeolsen)

9 years ago

Added that to the code I already have, but It did not do anything.

I have this code already, it will highlight the boxes:

#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel-body{
background:#efefef !important;
}

#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel-heading{
background:#efefef !important;
}
#colorbox_main_container_939 .colorbox_singel_box:hover .wpsm_panel{
background:#efefef !important;

But I also would like to have the transparent fix.

Btw, thank you for a very quick reply! 🙂

Thread Starter olsbor
(@borgeolsen)

9 years ago

Edit, it DID work. I forgot a “}” between the old code and the new!

But it works the other way I intended. It is transparent only when mouse over, could we do it the other way? So it is 70% transparent first, and solid when mouse is over?
Plugin Author wpshopmart
(@wpshopmart)

9 years ago
Ok tehn remove old one custom css then add this new one –
```
#colorbox_main_container_939 .wpsm_panel {
   background-color: rgba(255, 255, 255, 0.6) !important;
}
#colorbox_main_container_939 .wpsm_panel-default > .wpsm_panel-heading {
    background-color: transparent !important;
}
#colorbox_main_container_939 .wpsm_panel-body {
    background-color: transparent !important;
}
   
```

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘transparent box’ is closed to new replies.

Tags