Overlay text over 3:1 ratio image?

Soul Gaze Photography · February 4, 2015

I'm using a photo content block in 3:1 ratio on the top of my pages. I know I can use Photoshop to overlay text to them in a separate gallery, but since I plan to change them regularly, is is possible to just code text as an overlay on a SmugMug site?

leftquark · February 6, 2015

On your 3:1 Single Photo content block you can add a "Title" by clicking on the wrench in the customizer. Title is at the top. We can then use CSS to format it how you'd like.

Soul Gaze Photography · February 6, 2015

leftquark wrote: »

On your 3:1 Single Photo content block you can add a "Title" by clicking on the wrench in the customizer. Title is at the top. We can then use CSS to format it how you'd like.

I had thought it was possible. What CSS would I need to accomplish this? Did you by chance access the customizer on my website? I daily browse visitor stats and someone has via the 'Soul' galleries. It doesn't bother me if it was you, just if it wasn't I need to ensure site security.

leftquark · February 6, 2015

Soul Gaze Photography wrote: »

I had thought it was possible. What CSS would I need to accomplish this? Did you by chance access the customizer on my website? I daily browse visitor stats and someone has via the 'Soul' galleries. It doesn't bother me if it was you, just if it wasn't I need to ensure site security.

That's probably me

leftquark · February 6, 2015

Soul Gaze Photography wrote: »

What CSS would I need to accomplish this?

If you place the "Title" onto one of these and send me a link and what you'd like to change about it I can certainly cook something up for ya!

Soul Gaze Photography · February 7, 2015

leftquark wrote: »

That's probably me

Ok, good!

leftquark wrote: »

If you place the "Title" onto one of these and send me a link and what you'd like to change about it I can certainly cook something up for ya!

Thank you!! I've setup a test page here: http://www.soulgazephotography.com/Pages/Text-Overlay-Test-Page

Basically, I'd like to overlay text on top of the photo content block rather than have it above or below. I may not be the only one interested in this feature. It would be useful for a single homepage splash image with a call to action or in my case for my 3:1 images to keep them clean and modern minimalist. Thank you in advance if you determine a solution. I've played around, but I'm not a code pro.

Soul Gaze Photography · February 7, 2015

If it's helpful, here's a screenshot of the test page with text overlay via Photoshop. I could do this to each image and upload it to a gallery and switch it out, but there's far less steps to copy and paste the same 'base' code for each image and just change the title text compared to opening Photoshop, added text, uploading to SmugMug and adding image to page/gallery/folder. I figured it was worth a shot to see if it could be done on SmugMug as I've seen it on many other sites.

The Mechanic · February 7, 2015

Howdy,

You can add this CSS to a CSS content block to move your sample text over the image. You can adjust margins and colors as needed.

.sm-page-widget .sm-page-widget-header h2 {
color: #F00 !important;
position: relative !important;
z-index: 99 !important;
margin: 15px 0px -45px 20px !important;
}

-The Mechanic

The Mechanic · February 7, 2015

You can address this location further if this is affecting more then the desired area by adding a class to the above code with the widget number:

.sm-page-widget-9741806

2015-02-06_2335.jpg

SPORTDAD · November 16, 2015

I was hoping to find the answer to the original question here. I have the same requirement to overlay text over an image. When I tried inserting the CSS on my page, I could not get the text centered on the image nor could I increase the type size.

I have created a test page that describes exactly what I am trying to do. http://www.sportdad.ca/Trial/n-wrhqB9

Has somebody done this before who could share the CSS code with me?

Thank you!!!

Overlay text over 3:1 ratio image?

Comments