Databases
StackOverflow2013
Postsdbo
POnot getting suitable output in fetching image and its description
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POnot getting suitable output in fetching image and its description
    text
    copied!<p>I want to display images and their description(on hover) dynamically in a localhost application.</p> <p>I am getting a vertical output:</p> <p><img src="https://i.stack.imgur.com/OwWlh.png" alt="vertical output example"></p> <p>but I want the images to be show horizontally (to a certain extent), like this:</p> <p><img src="https://i.stack.imgur.com/iZilO.jpg" alt="horizontal output example"></p> <p>I tried the following</p> <h2>PHP</h2> <pre><code> &lt;?php $c = mysql_connect("localhost", "abc", "xyz"); mysql_select_db("root"); $q = "select * from product"; $qc = mysql_query($q); $count = 0; while ($ans = mysql_fetch_array($qc)) { if ($count == 0 || $count == 1 || $count == 2) { $title = $ans[1] . " " . $ans[2]; print '&lt;div class="img-wrap"&gt;'; print "&lt;img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'&gt;"; print '&lt;div class="img-overlay"&gt;'; print '&lt;h4&gt;' . $title . '&lt;/h4&gt;'; print '&lt;p&gt;' . $ans[9] . '&lt;/p&gt;'; print '&lt;/div&gt;'; print '&lt;/div&gt;'; } $count++; if ($count == 3) { print "&lt;br /&gt;"; $count = 0; } } ?&gt; </code></pre> <h2>CSS</h2> <pre><code>.img-wrap { height:200px; position:relative; width:300px; margin:10px; } .img-overlay { background-color:#000; bottom:0; color:#fff; height:200px; width:300px; opacity:0; position:absolute; z-index:1000; transition-duration:0.5s; cursor:pointer; } .img-overlay h4, .img-overlay p { padding:0 10px; } .img-wrap:hover .img-overlay { opacity:0.75; transition:opacity 0.5s; } b { background-color:#aa490e; color:#fff; font-size:36px; padding: 0 15px; padding-left:65px; padding-bottom:25px; font-family:"Courier New", Courier, monospace; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload