html - make an image bigger on hover and show php variable below -

html - make an image bigger on hover and show php variable below -

i have php file, had made querys phpbb database, obtaining variables (like topic_title , image link)

i know how show image in php, want create them bigger on hover, and, when image big, show topic title below, posible?

here code:

echo '<table cellspan="4">'; echo "<tr>\n"; while ($fila = $resultado->fetch_assoc()) { preg_match('/\[r?img:(.*?)\](.*?)\[\/r?img:(.*?)\]/', $fila['post_text'], $fila_contenido); $sololink = preg_replace('[^a-za-z0-9_+.-]','',@$fila_contenido[2]); $fila2 = $fila["post_subject"]; echo "<th><img src=$sololink></th>"; } echo "</tr>\n";

then want grow $sololink (the image) on hover, , show $fila2 (the title) below grew image

thanks

here's illustration using css.

html:

<div class="container"> <img class="image" src="http://lorempixel.com/400/200/" /> <div class="title">title of image here</div> </div>

css:

.image { -webkit-transition: width 2s, height 2s; transition: width 2s, height 2s; width: 400px; height: 200px; } .title { -webkit-transition: opacity 2s; transition: opacity 2s; font-size: 30px; opacity: 0; } .container:hover .image { width: 600px; height: 300px; } .container:hover .title { opacity: 1; }

example

php html css image