Show text when hovering Image

Hello,

When hovering over the images (Videos) I'd like the Title of the Project to appear, but I don't find any solution online.

Is there a code I can use?

The test website is: https://www.danielacorreia.com/new-gallery-1

Thank you!

Are you able to add Title when you on edit mode? If you can add this, then we can give code to make title appear on hover

Yes, in the Editmode I can choose a Title

On 6/23/2023 at 6:16 PM, Daniela09 said:

Yes, in the Editmode I can choose a Title

It looks like this title appear as alt text.

Add to Settings > Advanced > Code Injection > Footer (Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
    $('div.thumb').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="img-v-caption">' + text + '</div>');
    })
})
</script>
<style>
  .img-v-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    color: white;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
div.thumb:hover .img-v-caption {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
</style>

Amazing thank you very much!
Is it possible to just show 2 Images per row?

2 hours ago, Daniela09 said:

Amazing thank you very much!
Is it possible to just show 2 Images per row?

For desktop + mobile?

Desktop primarily for now. 

On 6/28/2023 at 9:36 PM, Daniela09 said:

Desktop primarily for now. 

Add this code under

<style>
  @media screen and (min-width:901px) {
  div#thumbnails {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    grid-gap: 10px;
}
.collection-type-gallery #thumbnails .thumb {
    position: static !important;
    width: 100% !important;
    height: auto !important;
}
  }
</style>

Thanks but when I add this code, the text doesn't appear anymore when hovering over - it cancels out the other code somehow.. any idea?

22 hours ago, Daniela09 said:

Thanks but when I add this code, the text doesn't appear anymore when hovering over - it cancels out the other code somehow.. any idea?

Use this new code

<style>
  @media screen and (min-width:901px) {
  div#thumbnails {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    grid-gap: 10px;
}
.collection-type-gallery #thumbnails .thumb {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
}
  }
</style>

Thank you. I've tried to adjust aspect ratio and space, but if I upload a 16:9 image as thumbnail it distorts.. any chance to adjust that?

On 8/16/2023 at 6:48 PM, Daniela09 said:

Thank you. I've tried to adjust aspect ratio and space, but if I upload a 16:9 image as thumbnail it distorts.. any chance to adjust that?

Can you take a screenshot of problem & Which page do you have problems with?

https://www.danielacorreia.com/commercials-motion

the first two pictures I created a 1:1 image with white background to "fake" the space, but the space is to large horizontally, and when I upload a 16:9 image, it distorts it into a 1:1...

 

Any news? It's urgent as I really need your support. Thank you!

Add 16:9 image then add this to Custom CSS (Design > Custom CSS or Website > Website Tools > Custom CSS)

.collection-type-gallery #thumbnails .thumb img {
    height: auto !important;
}

(I check the forum every 2-3 days and reply from the bottom up. You added a new comment on Monday, so your question was pushed to top of customize with code category page. If you don't add a new comment, I've seen it since Monday night or Yesterday.)

On 8/23/2023 at 1:02 PM, tuanphan said:

Add 16:9 image then add this to Custom CSS (Design > Custom CSS or Website > Website Tools > Custom CSS)

.collection-type-gallery #thumbnails .thumb img {
    height: auto !important;
}

 

(I check the forum every 2-3 days and reply from the bottom up. You added a new comment on Monday, so your question was pushed to top of customize with code category page. If you don't add a new comment, I've seen it since Monday night or Yesterday.)

Thanks for that, that works sofar, is it possible to make the HOVERING DARKER? Now it's bright and makes the text not readable..

On 9/4/2023 at 2:32 PM, Daniela09 said:

Thanks for that, that works sofar, is it possible to make the HOVERING DARKER? Now it's bright and makes the text not readable..

Add this CSS under

div.thumb:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
}
div.thumb:hover:after {
    opacity: 1;
}
.img-v-caption {
    z-index: 999;
}