bachir/drupal-leshed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better image caption: appears only when hover the image on the bottom

Browse Source
This commit is contained in:
bachir
2026-09-07 19:31:12 +02:00
parent 10bf2eb323
commit 8378de5124
3 changed files with 75 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/leshed/assets/scss/main.scss
+44 -22
View File
@@ -402,33 +402,55 @@ article.node-type-projet.view-mode-full{
// // }
// }
}
img{
width: 100%;
max-width: 100%;
height: auto;
}
blockquote.image-field-caption{
figure{
margin: 0;
position: absolute;
bottom: 0; left: 0;
width: 100%;
background-color: rgba(0,0,0,0.65);
color: #fff;
p{
margin: 0;
padding: 1em;
font-weight: 300;
font-size: 0.8em;
a{
display: block;
img{
width: 100%;
max-width: 100%;
height: auto;
}
}
opacity: 0;
transition: opacity 0.3s ease-in-out;
figcaption.image-field-caption{
margin: 0;
position: absolute;
bottom: 0; left: 0;
height: 5em;
width: 100%;
overflow: visible;
display: block;
// border: 1px solid red;
blockquote{
position: absolute;
bottom: 0; left: 0;
width: 100%;
margin: 0;
background-color: rgba(0,0,0,0.65);
color: #fff;
pointer-events: none;
p{
margin: 0;
padding: 1em;
font-weight: 300;
font-size: 0.8em;
}
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
&:hover{
// z-index:200;
blockquote{
opacity: 1;
}
}
}
}
&:hover{
z-index:200;
blockquote.image-field-caption{
opacity: 1;
}
}
}