Text caption over slider-image

SOLVE
Janette
Participant

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.slider-caption.PNG

 

 

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

@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

View solution in original post

0 Upvotes
3 Replies 3
Stephanie-OG
Key Advisor

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: 

 

backgroundimage.png

 

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

 

I hope that helps!

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

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

0 Upvotes
Jsum
Solution
Key Advisor

@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

View solution in original post

0 Upvotes
Janette
Participant

Thanks for the information is OK.

 

Regards

0 Upvotes