Text over thumbnail images on pages

woodfordsheppard · Member · Nov 3, 2015 at 6:12 pm
Copy link

Add topic to favorites
Hi,

I’m looking to put text over a thumbnail image on a page. The image is linked to another page once you click on it and I was hoping to put the title of this page on the image. Was wondering how to use the caption for the image and move it using CSS. Any ideas on how to do this?

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 3, 2015 at 8:10 pm
Copy link
Hi, we should be able to move the caption text. If you want to add some text to the caption for the the image and then give us a link to the page, we can help with that.
woodfordsheppard · Member · Nov 3, 2015 at 8:18 pm
Copy link
Hi – thanks for the response.

Here’s a link to the page that I’d like to do this on:

https://woodfordshepparddotcom.wordpress.com/work/

In the process of adding more images and will have to better arrange them on the screen as well.

Thanks!
thesacredpath · Member · Nov 3, 2015 at 8:21 pm
Copy link
Thanks for the link. If you can add a caption to one of the images, I can see what I can do about moving it up and over the image.
woodfordsheppard · Member · Nov 3, 2015 at 8:23 pm
Copy link
Just added a caption to the first image.
thesacredpath · Member · Nov 3, 2015 at 8:39 pm
Copy link
Super, thanks. Given that it looks like you may have both landscape and protrait oriented images, It may be best to make a rule for each, so that you can control where the text is. We could also group the rules into landscape and portrait rules. The targets the first image by using the attachment id for that image.
```
#attachment_127 .wp-caption-text {
    position: relative;
    top: -200px;
    color: #fff;
    font-size: 120% !important;
}
```
Here is a screenshot that shows, in my browser web inspector, where I found the attachment id.

See what you think with the above and we can work from there.
woodfordsheppard · Member · Nov 3, 2015 at 8:58 pm
Copy link
Hi – that worked great! I think for the most part we have landscape orientated photos but a few may be portrait so it would be good to have for portrait orientations as well.

This might be a complete stretch – but would it be possible to have the text only appear when the mouse is over the image and not there when it the mouse is elsewhere on the page?
thesacredpath · Member · Nov 4, 2015 at 6:56 am
Copy link
Hmmm, I can’t think of a way to make them appear on hover. It the text was a link, we could do that, but when we make normal text invisible, there is nothing to act on for a hover.

No items found.