Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

Hello,

Does anyone know how to style text that appears when hover over an image? Using foster template and all I can get is a black strip at the base of the image. Ideally like a white box that sits centred (image attached) with the project name in the box.

Website still a work in progress, link here: https://www.franklyinteriordesign.com.au/

Thanks!

 

image.png.b5d7125541829f2ed443f7d6234e76a0.png

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
19 minutes ago, iamaem said:

Don't have a link to the image, but have link to the site section and you can hover and see: https://www.franklyinteriordesign.com.au/projects

Add to Home > Design > Custom CSS

body#collection-5daf4aa89984f330a48a177e .image-caption-wrapper {
    background: #fff;
    text-align: center;
}

 

Share this post


Link to post
  • 0

Thanks @tuanphan!! Is there a way to have it sit in the centre of the image and watermarked so you can see through the image, just like the example I attached? 

Share this post


Link to post
  • 0
4 minutes ago, iamaem said:

Thanks @tuanphan!! Is there a way to have it sit in the centre of the image and watermarked so you can see through the image, just like the example I attached? 

you can change $fff to background: rgba(255,255,255,0.2);

vertical center?

 

Edited by tuanphan

Share this post


Link to post
  • 0
46 minutes ago, iamaem said:

Yes vertical centre, how would I do this? Thank yo for all your help, much appreciated

body#collection-5daf4aa89984f330a48a177e .image-caption-wrapper {
    background: rgba(255,255,255,.9);
    text-align: center;
    transform: translateY(-150%);
}

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...