How do i add mouse over css with php code?

mike-345

Hello, im trying to show game titles texts when you put the mouse pointer over the game images.
I have tried to add div class css to the code on bottom of this php script but am having no luck.
Would anyone know how to add a mouse over statement to this code? I am running php5.6 on my server so this code is older but works fine.
`<?php
// The following code is for a box of random games
echo '<div class="">';
$query = yasDB_select("SELECT * FROM games order by rand() limit 12");
while($games = $query->fetch_array(MYSQLI_ASSOC)) {
$gameurl = $games['title'];
$gameurl = str_replace(" ", "-", $gameurl);
$gameurl = str_replace("'", "", $gameurl);
$gameurl = str_replace('"', "", $gameurl);
$gameurl = str_replace('/', "", $gameurl);
$gameurl = str_replace("\", "", $gameurl);
$gameurl = rawurlencode($gameurl);
if (file_exists($games['thumbnail'])) {
$thumbnail = $siteurl.$games['thumbnail'];
$thumbnail = urldecode($thumbnail);
} else {
$thumbnail = $siteurl.'img/nopic.jpg';
}
if ($seo=="yes") {
echo '<div class="image-inner1">';
echo'<a href="' . $siteurl . 'game/' . $games['id'] . '/' . $gameurl . '.html' . '">';
echo '<br><img src="' . $thumbnail . '" width="135" height="105" /></a></div>';
echo $games['title'].''.$void.'';
}else {
echo '<div class="image-inner1">';
echo '<a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">';
echo '<br><img src="' . $thumbnail . '" width="135" height="105" alt="'.$games['name'].'" title="'.$games['name'].'"/></a>';
echo $games['title'].''.$lightbox.'</div>';

		}

	}
	$query->close();
	echo '</div>';?>`

NogDog

mike-345 when you put the mouse pointer over the game images

The quick and easy solution is to add a title attribute to the relevant image HTML tag. The downside is: what if the user is on a tablet, phone, or otherwise not using a mouse?

Weedpacket

Work out what content you want and the CSS to go with it to make it visible on hover (there are plenty of CSS tutorials on the subject). That's where all the work is. PHP only comes in at the end when you want to output the text you've just worked out is needed, and you already have plenty of examples in your own code about how to output text.

mike-345

Hi, i know this line --echo $games['title'].''.$lightbox.'</div>';--outputs the text right below 112 random game images that are 60px by 60px in size, problem is it blows the whole thing apart when displaying all these titles, So i thought a mouse over would be nice, I have tried some mouse over css aimed at the bottom of the php code, Also it is a flash game legacy site using ruffle to work so laptop or desktop would be best to play the games, thanks for your help.

Weedpacket

Thing is, this has nothing to do with PHP. That will only come in when you have everything working, and you need the script to insert the relevant text.

mike-345

Hello, yes everything is working, the images output just fine and when i add this php line to the bottom it will output title texts to each image, Now i need to make the titles only show when mouse over them, i have tried different css scripts but cant figure out how to get them to work as they seem to contain two div classes, One for the images and one for the text, like this example from 3schools
div class="container"
img src="img_avatar.png" alt="Avatar" class="image"
div class="overlay
div class="text">Hello World
Im trying to find out how to implement such class's to the php game title output, I.E
echo $games['title'].''.$void.'</div>';

And this line being the images php output,
echo '<img src="' . $thumbnail . '" width="60" height="60" alt="'.$games['name'].'" title="'.$games['name'].'"/></a></div>';
Thanks for your help

Weedpacket

mike-345 cant figure out how to get them to work as they seem to contain two div classes, One for the images and one for the text

Well yes, one to be visible and one to only show up on mouseover. Why can't you do that in your code?

div class="container"
img src="<?=$games['image thumbnail'] ?>" alt="Avatar" class="image"
div class="overlay
div class="text"><?=$games['popup text'] ?>

Or whatever you've got.

mike-345

No, it did not work, seemed simple but is not.

mike-345

This lines output showed a hover over title but its small, would like to style it bigger if possible,
echo '<img src="' . $thumbnail . '" width="60" height="60" title="'.$games['title'].'"/></a></div>';

Have to find out how to style this part of the code
title="'.$games['title'].'"

Weedpacket

Isn't that what the width and height are there for?

mike-345

Hi, no that controls the size of the thumbnails outputted, 112 of them.

Weedpacket

So is there something in the CSS that controls the style?

mike-345

Yes, just tried to add a font size to the css, dont work, also tried inline css, dont work, wow.

mike-345

Well i got it, by combining div class="ran_box" with the tool tip css i was able to create a nice styled tool tip that shows the game titles, If anyone cares to see the results it can be found on the game play page of my site funplaytyme.com