drupal overlay text when you hover over the image views
This is only in part a Drupal question. The part that interests you most is the CSS styling.

As a tutorial, this could take several hours to explain, using the classes, wrappers, fields and so forth. I will jump over the styling, but I hope this will help as well.

As for the view itself, managed by Drupal, it is a little tricky. You need 2 containers in a wrapper. The first container should have the link set on the image and the second container should have the rest of the text and buttons.

Create a page or a block view listing all your nodes you need to include, printing fields.

Add the field image and set it to link to the node itself.

Add the text fields you need, one after the other, in the right order (title on top, text in the middle, button - linked to content - at the end and so forth).

Here comes the Drupal tricky part. Set everything as "exclude from display".

Now, as a last field, add a Global Text Area and print the 2 containers. Use tokens generated by Drupal and include them inside the containers.


For the first container, write down the wrapper code including the link over the image as a token generated by field no. 1.
For the second container, write the code for the wrapper and include inside every token for the hover visible content, in the proper order.


Then you need the right CSS, using position absolute, setting the view wrapper as relative and the second container as absolute.

Good luck.