Mouseover Titles on Project Images

is it possible to make that when I hover mouse on project images, I would not only see the color overlay but also their titles (project-theta, project-eta and so on…)?


No, sorry, that’s not an option unless you’re able to change the code in the plugin yourself.

For everyone who will need it:
You need to modify Sydney Portfolio plugin file, on lines 99 and 101 I have added this code:
<div class="project-title">' . get_the_title() . '</div>
Then it gives you project titles on hover.
After that it is only matter of CSS to modifying it :slight_smile:

Could you post a screen shot of your full code for the portfolio plugin?

could guide me how to do the css changes to the title to appear on the image when pointing the mouse ?

Sorry for very late reply.
Here’s the full lines in portfolio plugin:

$output .= '<div class="project-item item isotope-item ' . $termsString . '"><a class="project-pop" href="' . esc_url($project_url) . '"><div class="project-pop"></div><div class="project-title">' . get_the_title() . '</div></a><a href="' . esc_url($project_url) . '">' . get_the_post_thumbnail($post->ID,'sydney-mas-thumb') . '</a></div>';
            else :
                $output .= '<div class="project-item item isotope-item ' . $termsString . '"><a class="project-pop" href="' . get_the_permalink() . '"><div class="project-pop"></div><div class="project-title">' . get_the_title() . '</div></a><a href="' . get_the_permalink() . '">' . get_the_post_thumbnail($post->ID,'sydney-mas-thumb') . '</a></div>';

CSS changes:

.project-title {
  color: #FFF;
  background-color: rgba(0,0,0,0.7);
  font-size: 20px;
  margin-top: 60px;
  text-align: center;
opacity: 5;


Thank you Kestis.

This sort of solves my problem but I still can’t get all the style rules to work. And I can’t figure out what I am doing wrong. Somehow the body-rule for font-size overwrites the style I am giving the title in my child theme. Does anyone have an idea how to do to change the fotn size?

Hey Kestis,

So thanks for the information on how to get the title to appear over the image. I would like to however not be transparent. I tried to change the opacity and that doesn’t affect anything. Any help?