Gallery Block Carousel: Text over Image v0

To add Text over Image in Gallery Block Carousel, you can do these.

#1. First, you need to add URL to Image

#2. Next, add Text to Title field

#3. Use this code to Page Header Injection (page where you use Carousel)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.beaverhero.com/file?filename=1757031763177galleryblockcarousel.js"></script>
<style>
span.alt-text-span {position: absolute; bottom: 20px;left: 10px;color: #fff;}
</style>

#4. Customize

#4.1. To change text color, space between text – bottom left/bottom right of image, change this.

#4.2. To make text appears on hover, you can add this code under Line 05

<style>
span.alt-text-span {
    opacity: 0;
}
a:hover span.alt-text-span {
    opacity: 1;
}
</style>

 

Buy me a coffee