Hover image description on image - php

Question

I am no expert in PHP, javascript and js; so I am hoping someone can help me in easy language terms. I have just developed my first wordpress site and changed the code immensely, using this forum - thanks heaps so far!
The site: http://www.heritageglass.com.au
My request: text (description of image in media library) hovering over image.
Just like this website or this plugin, I have found several questions on this site that refer to my issue but they haven't seemed to help or I don't exactly know where to place this as it's grabbing the_title and I want the_description. Is there such a term?
PHP code in portfolio.php template:
<div data-id="post-<?php the_ID(); ?>" data-type="<?php
$categories = get_the_category();
$count = count($categories);
$i=1;
foreach($categories as $category) {
echo str_replace('-', '', $category->slug);
if ($i<$count) echo ' '; $i++;} ?>" class="post-<?php the_ID(); ?>
<?php
$categories = get_the_category();
foreach($categories as $category) {
echo str_replace('-', '', $category->slug).' '; } ?> project portfolio-item-wrap">
<div class="portfolio-item">
<?php if ( has_post_thumbnail() ) { ?>
<a class="portfolio-item-img" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'portfolio-image' ); ?></a>
<?php } ?>
<h4><?php the_title(); ?></h4>
<p>
<?php
$categories = get_the_category();
$temp = array();
foreach($categories as $category) {
if ($category->category_parent == 0) continue;
$temp[] = str_replace('-', '', $category->name);
}
echo implode(", ", $temp);
?>
</p>
</div>
</div>
I found this: Text over image using jquery and css
and added the script in the header.php. And used my .portfolio-item and .portfolio-item-img instead of .wrapper and .description - but that didn't do anything.
Hoping someone can lead me in the right direction?
Thanks!

Answer 1

Doing a search on the WordPress forums I found this from four years ago, not sure if it's what you need, but it might point you in the right direction.
$img_desc = $image->post_excerpt;

Answer 2

I think it will help you....
http://www.net-kit.com/10-jquery-caption-plugins/#
http://www.inwebson.com/jquery/jquery-image-hover-effects/

Answer 3

When editing a post, add two custome field, one for title, one for descritption.
Our code goes like this:
$dataType = '';
$divClass = '';
$categories = get_the_category();
$count = count($categories);
$i=1;
foreach($categories as $category) {
$dataType .= str_replace('-', '', $category->slug);
$divClass .= str_replace('-', '', $category->slug).' ';
if ($i<$count) $dataType.= ' ';
$i++;
}
$metaList = get_post_meta(get_the_ID());
$title = isset($metaList['title']) ? $metaList['title'] : '';
$description = isset($metaList['description']) ? $metaList['description'] : '';
// now we have title and description for the thumb!
?>
<div data-id="post-<?php the_ID(); ?>" data-type="<?php echo $dataType;?>"
class="post-<?php the_ID(); echo $divClass;?> project portfolio-item-wrap">
<div class="portfolio-item">
<?php if ( has_post_thumbnail() ) { ?>
<a class="portfolio-item-img" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail( 'portfolio-image' ); ?>
</a>
<?php } ?>
<h4><?php the_title(); ?></h4>
<p>
<?php
$temp = array();
foreach($categories as $category) {
if ($category->category_parent == 0) continue;
$temp[] = str_replace('-', '', $category->name);
}
echo implode(", ", $temp);
?>
</p>
</div>
</div>

Answer 4

I have found the answer after sooooo much research.
This is the answer: How do I get the featured image description from my wordpress page?
enter the the_post_thumbnail_caption(); within the span tags and set your span tags class in css.
done.
Thanks to all of you for your help!