Bonjour je teste le site http://www.templategarden.com/preview/ascend/ pour l'utiliser ensuite et au niveau du portfolio les balises <figcaption> ne s'affichent pas sur mobile alors pour simplifier j'aimerai les rendre fixe. Sauf que je n'y arrive pas.
Pourriez vous m'aider à y voir plus clair :
Merci beaucoup
Pourriez vous m'aider à y voir plus clair :
.grid figure {
margin: 0;
position: relative;
border: 1px solid #ddd;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
color: #fff;
background-color: #34b1c4;
}
.grid figcaption h5 {
margin: 0;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 5px;
color: #fff;
font-weight: 700;
text-align: left;
letter-spacing: 1px;
}
.grid figcaption a {
text-align: left;
padding: 5px 10px;
margin-left: 20px;
display: inline-block;
background: #2f2f2f;
color: #fff;
font-size: 13px;
}
/* Caption Style */
.mask figure {
overflow: hidden;
}
.mask figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .mask figure:hover img, .mask figure.cs-hover img {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.mask figcaption {
height: 50px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .mask figure:hover figcaption, .mask figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.mask figcaption a {
position: absolute;
top: 10px;
bottom: 10px;
right: 30px;
}
Merci beaucoup