I've been trying to display the title and description of these images in a gallery grid on hover. I've been searching the forums and found some helpful code, but nothing that's exactly what I'm looking for.
This is the code I am currently using (see below). It is displaying only the title on hover. I need it to display the title and description on hover. Does anyone have any suggestions?
I'm on 7.0 an the Template is Five.
Thanks in advance.
The website:
https://www.toneworx.com/demo
and the code:
.slide a:after {
position: absolute;
content: "";
display: block !important;
background: rgba(236,112,8,0.8);
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
pointer-events: none;
padding: 35px;
}
.slide a {
position: relative;
}
.slide a {
position: relative;
opacity: 1 !important;
}
.slide:hover a:after {
opacity: 1;
}
.image-slide-title {
font-size: 20px !important;
font-weight:normal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 70%!important;
color: white;
opacity: 0;
z-index: 1000;
transition: all 0.5s;
pointer-events: none;
padding: 50px !important;
line-break: normal;
white-space: initial !important;
text-align: center !important;
text-justify: none;
}
.slide:hover .image-slide-title {
opacity: 1;
}