Téléchargez le fichier ici
Une fois votre fichier décompressé, vous aurez le choix parmi les différents menus. Dans le cas présent, j'ai pris le n°3 soit :
index 3
style 3
Fichiers à placer dans le head : j'ai choisi d'héberger mes fichiers sur un serveur.
<link rel="stylesheet" type="text/css" href="https://www.aht.li/2788892/style_common.css" />
<link rel="stylesheet" type="text/css" href="https://www.aht.li/2788894/style3.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
Détails du fichier common.css :
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://www.aht.li/2788881/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
La seule chose à modifier sur ce fichier, c'est le rajout de l'image dans .view (background: #fff url(https://www.aht.li/2788881/bgimg.jpg) no-repeat center center;)
Si vous mettez vos propres images, ne pas oublier de mettre les dimensions de celles-ci dans le CSS. Ici les images font 300x200
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Détails du fichier style3.css :
Vous n'avez aucune modification à apporter sur celui-ci !
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Partie HTML :
<div class="view view-third">
<img src="https://www.aht.li/2788883/9.jpg" />
<div class="mask">
<h2>Hover Style 3</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Lire la Suite</a>
</div>
</div>
<div class="view view-third">
<img src="https://www.aht.li/2788884/10.jpg" />
<div class="mask">
<h2>Hover Style 3</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Lire la Suite</a>
</div>
</div>
<div class="view view-third">
<img src="https://www.aht.li/2788887/11.jpg" />
<div class="mask">
<h2>Hover Style 3</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Lire la Suite</a>
</div>
</div>
<div class="view view-third">
<img src="https://www.aht.li/2788889/12.jpg" />
<div class="mask">
<h2>Hover Style 3</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Lire la Suite</a>
</div>
</div>
Vous avez juste à coller les liens images que vous aurez stockés quelque part selon votre choix !