Text caption over slider-image

[Janette]

Hi Every body good afternoon

I have a slider in one of my page in my web page but I don´t know how can I do to put the texto over the slider image.

this is the link of my page: https://www.inbest.cloud/caso-de-exito-ine-en-la-nube-de-aws-0

Can you help me with this plis.

I remain to your comments.

Regards

[Jsum · Accepted solution]

@Janette,

I don't know if slick slider has a default method for this, but you can add this to your css and it will work:

(to stick to bottom of image)

.caption.below {
    position: absoslute;
    bottom: 10px;
}

(to stick to middle)

.caption.below {
    position: absoslute;
    top: 50%;
    transform: tranlateY(-50%);
}

Your slide wrapper containing the image and caption markip is set to position relative so you can manipulate the positions of it's children relative to it's borders.

Need help? Hire Us Here

[Janette]

Thanks for the information is OK.

Regards

[Stephanie-OG]

Hi Janette, 

The easiest way to accomplish this would be to set it as a background image of the slick-slide-inner-wrapper instead of an image. You can then set padding to the caption below div to set the height. Something like this: 

<div class="slick-slide-inner-wrapper" style="background: linear-gradient(
        rgba(85, 86, 90, 0.2), 
        rgba(85, 86, 90, 0.2)    
      ), url(https://www.inbest.cloud/hubfs/iNBest.Cloud-TemplateAlthea/Im%C3%A1genes/Casos%20de%20%C3%A9xito/INE/Slider_INE_3.png?t=153549086545);"> 
                <!-- <img alt="Slider_INE_3" title="Slider_INE_3" class="" style="opacity: 1;" src="https://www.inbest.cloud/hubfs/iNBest.Cloud-TemplateAlthea/Im%C3%A1genes/Casos%20de%20%C3%A9xito/INE/Slider_INE_3.png?t=1535490865451">-->
                        <div class="caption below" style="text-align: start; padding: 150px 0;">
            <span><h2 style="text-align: center; color: #ffffff;"><span style="color: #06272e;">CASO DE ÉXITO INSTITUTO NACIONAL ELECTORAL </span></h2>
<h2 style="text-align: center; color: #ffffff;"><span style="color: #06272e;">Elecciones presidenciales 2018 Conoce la solución diseñada para garantizar la publicación de los resultados electorales de México.</span></h2></span>
        </div>

            </div>

(Add the green code and remove the red code)

See below: 

Note that if you're updating a slider module this will apply to all slides and not just this one.

I hope that helps!

---

HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!