[afleischerParticipant]

I’ve added images in a section of my homepage, and i’d like to have the title text of the image on top of the image itself. Using an image as the background of the column/section isn’t a great option here, because the images are linked to Vimeo videos. Ideally, i would like to have a cover-text animation option, as seen at the top of page for the Ethos stack:

http://theme.co/x/demo/ethos/1/shortcodes/

I know those are blog posts, but I imagine the same effect should be possible for an image.

If that’s not possible (or absurdly complicated), just a title overlay would work too, as seen here:

It seems that the only select-able display options for image titles in the X theme at this point are tooltips and pop-outs.

[afleischerParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! Would you mind adding the actual text so we can do some testing. You could also make those images as the column backgrounds and utilize the jQuery provided here to make the columns a link.

Cheers!

[afleischerParticipant]

Sure thing – the images in question are the four on the homepage under “Recent Work”. Each has the video title and the word “director” (as a placeholder for the director’s name). Currently the text for each appears as a pop-out outside of the image, which is what i’d like to appear over the image.

It’s good to know that I can make the images column backgrounds instead and link them, but it’s worth mentioning that a text overlay is an essential option for images. It’s definitely worth implementing into X (and Cornerstone, which is a fantastic tool btw) if that’s under consideration.

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Regretfully text overlay isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

For the meantime, what you can do, please edit your page in Cornerstone and turn on the advance controls. You can insert a text element after your image and add a custom overlay class. Add this custom css code in the Settings tab > Custom CSS and your done.

.x-column{
  overflow: hidden;
}

.overlay {
  background-color: rgba(0,0,0,0.75);
  width: 100%;
  padding: 10px;
  position: absolute;
  bottom: -100px;
  transition: bottom 0.5s linear;
}

.x-column:hover .overlay{
  bottom: 0;
  transition: bottom 0.5s linear;
}

Thanks for understanding. Take care!

[Author]

Posts