Site logo

Archived topic

Caption - Image

16 replies · Started by Raul on January 29, 2021

Viewing posts 16–17 of 17

It could be everywhere as overlay over the image

Hi Raul,

Try to follow the steps below:
1). Add this CSS:

.wp-caption-text.thumb-caption-text {
    position: absolute;
    bottom: 0;
    top: 0;
    padding-top: 24%; /*adjust this number*/
    width: 100%;
}
.thumb-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    top: 0;
    right: 0;
}

2). Disable writing-mode: vertical-rl;and transform: rotate(180deg);from your previous CSS since it looks better when it's displayed horizontally on overlay.

.thumb-caption-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);    	
    margin-bottom: 0;
    color: #fff;
    background-color: red!important;
}

3). Disable padding: 20px!important; from this CSS:

* .inside-article p.thumb-caption-text {
    padding: 20px!important;
    background-color: rgba(0, 0, 0, 0.35)!important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0.5)))!important;
    background: linear-gradient( 
0deg
 , rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%)!important;
    font-size: 16px;

Let me know :)

This archived topic is closed to new replies.