How to change css background color dynamically in php using color from database

Question

I have a grid of items with all their data stored in a database, but I want each of their hover overlays to be the color associated with that item in the database.

Using a color picker (jscolor) during the upload process, the hex code is stored in the database. I can then get the hex code but cannot figure out a way of dynamically styling the background-color of the overlay in php.

This is sort of what I'm trying to achieve:

Color Overlay

CSS

.overlay-custom {
position: absolute;
width: 250px;
height: 250px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
  background-color:#00ff00;
  z-index:2;

I want to dynamically replace the background-color of this div class with the hex code from the database.

Just set a javascript variable in PHP with the hex value and then set the color with JavaScript. — www139
– www139, Commented Dec 6, 2015 at 2:05
is it not? damn.. could you suggest an alternative? That sound as though it would work. Could you possibly give me an example please? I'm a noob at javascript — Codedstuff
– Codedstuff, Commented Dec 6, 2015 at 2:12

Ricky Goldman · Accepted Answer · 2015-12-06 02:46:25Z

4

Create an inline style using php when you originally output the .overlay-custom.

<?php
    // load overlay color from database somehow
    $overlay_color = get_overlay_color();
?>

<div class="overlay-custom" style="background-color:#<?php echo $overlay_color ?>"></div>

or

<?php
echo '<div class="overlay-custom" style="background-color:#' . $overlay_color . '"></div>';
?>

Then opacity and all that can still be adjusted in the css file.

edited Dec 6, 2015 at 2:46

answered Dec 6, 2015 at 2:17

Ricky Goldman

3491 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Codedstuff Over a year ago

Thanks, would it be possible to put it in an echo? it also needs to add the #. Something like? echo '<div class="overlay-custom" style="background-color:#('$overlay_color')">';

Ricky Goldman Over a year ago

Yes, there are lots of ways to get the # sign in there. See how I have edited the last line in the answer.

Codedstuff Over a year ago

This is what I tried: echo '<div class="overlay-custom" style="background-color:#<?php echo $overlay_color ?>">'; echo '</div>'; however it didn't work

Ricky Goldman Over a year ago

See my edit with the full echo. You didn't have correct php syntax in the above.

Codedstuff Over a year ago

Ah! That was my problem. Damn syntax. Thanks so much, spent ages on that.

Collectives™ on Stack Overflow

How to change css background color dynamically in php using color from database

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related