Aligning text to images in slide (CSS)

Hi there,

I am adding a few CSS bits to a gallery of images I have on my Hishimoto template, but I think I've messed up with something 😅  I wanted the title appear when hovering on an image in the slide. So I added this CSS code: 

/* even though they are turned on, hide the image caption */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"] .image-description {
  opacity: 0 !important;
}
/* bring the opacity back, only on image hover */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"]:hover .image-description {
  opacity: 0.85 !important;
} 
@media only screen and (min-width: 801px)
    { 
.slide img {
             border-left: 200px solid;
             border-right: 200px solid;
             border-color: white !important;
}
}
@media only screen and (max-width: 639px)
    { 
.slide img {
             border-bottom: 200px solid;
             border-color: white !important;
}
}

But, cause I added bigger borders to the images in order to get more space between each other, the title is now too wide (I want it to match the width of the specific image). See screenshot and thank you! 🙏

Can you share link to page in screenshot? Difficult to fix the code without checking slide code

There you go! http://www.fabioforin.com/people/silver-portrait-photography

On 5/21/2020 at 12:04 AM, Fabster said:

There you go! http://www.fabioforin.com/people/silver-portrait-photography

 

Hi. It seems you solved?

Hi, I didn't. 

You see the semi-transparent bar with title of image place and year that appears if you select the image? That should match the width of the image - it's much wider.