JSFiddle - React, Tailwind, and code Playground
by kodjoe mambi
HTML
<div style="max-height: 1448px; max-width:80%; ">
<div class="example">
<img src="http://www.500milligrammes.com/facticemagazine/final/news/narcose/img/2.jpg" alt="">
<a href="http://blog.haeresis.fr/upload/image/the_moment_by_dzsurnik.jpg" target="_blank">
<span>Voir l'image en grand format</span>
</a>
</div>
</div>CSS
.example {
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.example img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.example a {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: left;
font-weight: bold;
font-size: 1.6em;
line-height: 1.3;
}
.example a:hover {
/* DĂ©sactiver visuellement le comportement `:hover` sur le lien */
color: #48739E;
text-decoration: none;
}
.example:hover a {
/* Afficher `a` au survole de `.example` */
display: block;
}
.example span {
/* Centrage vertical automatique pour le texte */
position: relative;
display: inline-block;
top: 20px;
left: 20px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}