Como adicionar links em uma Galeria no modelo DIVI e mostrar um título ao passar o mouse sobre ele (Hover)

Oi pessoal

Hoje vamos ver como criar uma galeria no modelo Divi que mostra um texto ao passar o mouse sobre ela e também tem um link.

Isso é útil se quisermos criar um portfólio personalizado, receitas culinárias ou qualquer outra ideia que venha à mente.

Se você não tiver o modelo DIVI, poderá compre aqui por 69$, ou Se você está inscrito na Zona Premium, pode baixá-la gratuitamente na área de membros. Você pode dar inscreva-se por 10€/mês aqui

O resultado será o seguinte:

Para isso usaremos o construtor DIVI e o aspecto final que o editor deve ter é o seguinte:

O primeiro passo é configurar a linha, é a seção verde da imagem anterior, quando você clicar nas três linhas horizontais você verá a seguinte tela e você deve deixar as opções como você vê aqui:

Agora adicionamos o módulo galeria com as seguintes opções:

Para adicionar as imagens temos que clicar no botão “Atualizar Galeria” e escolher as imagens que vamos adicionar:

Agora temos que adicionar em cada imagem o texto que queremos que apareça ao passar o mouse na imagem.
Vamos adicioná-lo no campo de legenda ao clicar em cada imagem:

No exemplo eu adicionei o seguinte link com um título e subtítulo:

<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>

Temos quase pronto, mas na falta de adicionar a folha de estilo parece que estamos muito longe do resultado final:

Agora é só adicionar o CSS. Para isso, clicamos nas opções do construtor, como mostra a imagem a seguir:

Adicionamos o css na tela a seguir:

O CSS que você deve adicionar é:

/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/
/*Hide the image title and default overlay effect*/
.et_pb_gallery_item h3,
.et_overlay {
    display: none;
}
/*Set the position and size of the images and add an extra pixel to get rid of white space between images*/
.et_pb_gallery_grid .et_pb_gallery_image {
    position: absolute;
    width: calc(100% + 1px) !important;
}
.et_pb_gallery_caption {
    margin: 0 !important;
}
/*Set the colour of the caption text*/
.et_pb_gallery_caption a {
    color: #fff;
}
/*Set the font size and case for the title*/
b {
    font-size: 20px;
    text-transform: uppercase;
}
/*Set the position of caption text so it displays on to of the image on hover and add an outline*/
p.et_pb_gallery_caption {
    position: relative;
    background: rgba(0, 0, 0, .5);
    /*This is the colour of the image overlay on hover*/
    border: none;
    outline: 5px solid rgba(255, 255, 255, .5);
    /*This is the colour of the border*/
    outline-offset: -20px;
    /*This moves the border in a little from the edge*/
    text-align: center;
    padding: 25% 5%;
    /*Adjust the first value if using more or less text*/
    cursor: pointer;
    opacity: 0;
    /*Hide the caption until hover*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
/*Show the caption on hover*/
p.et_pb_gallery_caption:hover {
    opacity: 1;
}
/*Media queries: You will need to adjust these values if using more or less text*/
@media only screen and (max-width:1366px) {
    p.et_pb_gallery_caption {
        padding: 23.7% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width:1280px) {
    p.et_pb_gallery_caption {
        padding: 19% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width:1024px) {
    p.et_pb_gallery_caption {
        padding: 15% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
/*This media query make the gallery display as two columns rather than three on tablets in portrait*/
@media only screen and (min-width: 768px) and (max-width: 980px) {
    .et_pb_column .et_pb_grid_item:nth-child(2n+1) {
        clear: both !important;
    }
    .et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
        width: 50% !important;
        margin: 0 !important;
        clear: none;
    }
    p.et_pb_gallery_caption {
        padding: 26.5% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width: 480px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 24.8% 5%;
        /*Adjust the first value if using more or less text*/
    }
}
@media only screen and (max-width: 320px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 19.4% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

E conseguimos o resultado que procurávamos 😉