Css/php - Overlaying An Image With Hover And If Statements

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

Solution 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

<divclass="server"><divclass="overlay"><h1><span>Hunger games</span><small>HG1.Play-Minezone.co</small></h1><divclass="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><divclass="arrow <?phpecho$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><divclass="numbers"><?phpecho$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 imagewidth:  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
}

Solution 2:

Your image will need to be in a parent node, probably a DIV, with the position of relative. The arrow will have the position of absolute sitting on top of the image. You will need to set the x and y value of the arrow. Now the CSS should work fine based on a class. For example:

<div class="rel-wrapper <?php $showRed ? 'show-red' : 'show-green'; ?>">

<img src="..." />

<img src="..." class="arrow" />

</div>

.rel-wrapper .arrow { display:none; }

.show-red:hover .arrow { display:block; }

.show-green:hover .arrow { display:block; }