Installation de  "Original Hover Effects with CSS3"

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 !