html - CSS/PHP - Overlaying an Image with Hover and If Statements

Question

I'm currently creating a Minecraft server listing page for a client. However am stuck on one thing, which I haven't done before. Please see this image (sorry for Paint usage. I was rushing!)

Basically, the 'Normal' image will change to the 'Hover' image when hovering. I can do this just fine, however, see those up and down arrows, and the 45/90? I will be needing them to change depending on what the PHP query receives. I have all the PHP ready. It currently looks like this:

You can see the arrows and the players online there, however I want them to be on top of the images, and still change on what the PHP feeds back. How can I do this?

Answer 1

I think you are approaching the problem from a slightly ineffecient perspective, even if not completely wrong. As far as I understand, you have images interacting on hover, but all you are trying to do could be done with the simple use of CSS and classes, then mixing your PHP for the data retrieval.

You could of course do it with images, and if you really need it, I can tell you how; but I thought you might consider this other solution.

Here is a demo

Here are some suggestion to improve the approach:

1. Display your main image as a background-image rather than an img element. This way it opens the possibility to swap it via CSS, even if we're not going to need it in this example.

2. Use the arrows as well as background-image on absolutely positioned elements. Perhaps consider improving accessibility by using some image replacement technique.

3. Display your additional information on an additional overlay element which will be displayed on :hover of the parent element, with an rgba background-color. If you want to improve browser compatibility, you can fallback to altogether change the background-image of the parent div via CSS as mentioned in (1.).

4. Display your text via a PHP variable and your arrow by changing the class of the element described over in (2.) using a simple conditional statement.

PHP/HTML

<div class="server">
    <div class="overlay">
      <h1><span>Hunger games</span><small>HG1.Play-Minezone.co</small></h1>
      <div class="more-info">
        <p>Hunger games is a full-out hardcore PvP experience, with only one
           winner. The objective of the game is to be the last one standing.
           Will you team with others, go solo, and conquer the battlefield?</p>
        <p>Only you are left to decide</p>
      </div>
        <div class="arrow <?php echo $serverUp ? 'up' : 'down'; ?>"><!-- You may
            want some info here to make it more accessible, and perhaps hide it
            by using some image replacement technique --></div>
        <div class="numbers"><?php echo $numbers; ?></div>
    </div>
</div>

CSS

I put here some essential css, in my example I use a bit more styling, but you can freely check that out.

.server {
  background: url('/yourimage.jpg') center no-repeat; // Place here your
                                                      // main image
  width:  300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.server:hover .overlay{ 
   background-color: rgba(0,0,0,0.5); // Rgba goes here, if you prefer, use an
                                      // image with the effect already achieved
}

.server:hover .more-info{ 
  display: block;
}

.overlay{ 
  position: absolute;
  height: 100%;
  width: 100%;
}

.more-info{ 
  display: none;
  width: 100%;
}

.numbers{ 
  position: absolute;
  bottom: 10px;
  right: 5px;
}

.arrow{ 
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 5px;
}

.arrow.up{ 
  background-color: green;  // In your case you would have background-image
                            // for your green arrow image here
}

.arrow.down{ 
  background-color: red;    // See above, but for red arrow
}