test hover

1 1 1 1 1
Vote 0.00 (0 Votes)

Cette page permet de voir comment utiliser/développer des effets "Hover" (au survol") avec un peu ce CSS.

Pour tous ces tests, j'ai utilisé un seul et même article. La partie Article est saisie en mode "Non WYSIWYG", pour saisir du code HTML (bouton "toogle editor" ou "Basculer l'éditeur").

Pour ces démonstrations, j'ai externalisé les fichiers CSS et je les ai inclus en utilisant l'action addCssHead du plugin UP.

Remarque: le plugin UP propose aussi plusieurs effets intéressants dans son action image-hover.

Premier effet simple: un zoom sur image.

Au niveau CSS, on commence simplement en ajoutant dans le custom.css: 

/* classe zoom sur une image */

img.zoom:hover,
img.zoom:focus {
transform: scale(1.2);
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
box-shadow: 0 0 10px ;
}

Ensuite, au niveau des images, on ajoute juste : class="zoom".
Ce qui nous donne:


Nous avons commencé simplement, attention, on va compliquer un peu...

  • Démo 2

    C'est facile et c'est détaillé ci-dessous...

  • Démo 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

Pour créer ces effets, à partir de http://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

Ajout dans le Custom.css 

<style>
.demo-2 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
</style>

Création d'un article

<ul class="demo-2 effect">
      <li>
         <h2 class="zero">Démo 2</h2>
         <p class="zero">C'est facile.                 </p>
      </li>
      <li><img class="top" src="/images/image1.jpg"                      alt=""/></li>
</ul>

Pour l'effet démo 1, il suffir de remplacer la partie .effect dans le CSS par 

.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}

.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}


Sur le site de démonstration, un 3ème effet est aussi disponible: 

  • Demo 3!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

Attention : lorsque vous enregistrez ou faites des modifications, les tags <figure> et <figcaption> ont tendance à disparaître....

Au niveau de l'article, le contenu est un peu plus compliqué:

<ul class="demo-3">
<li>
<figure>
<img src="/images/image1.jpg" alt=""/>
<figcaption>
<h2>Demo 3!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>

Au niveau du CSS, on complique un peu aussi (je l'ai mis sur 2 colonnes...)

.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}

.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}

.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}

.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}

.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}

 

=> suite ==>

.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}

.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}

.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}

.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}


Trouvé sur http://stackoverflow.com/questions/11375724/fade-in-fade-out-on-image-hover-using-css3, un nouvel effet permet de faire apparaître/disparaître (notez opacity: 0.2 pour laisser un peu l'image)

  • Démo fade

    C'est facile et c'est détaillé ci-dessous...

l'article contient :

<ul class="demofade">
<li>
<h2>Démo fade</h2>
<p>C'est facile et c'est détaillé ci-dessous...</p>
</li>
<li><img src="/images/image1.jpg" alt="" /></li>
</ul>

Le fichier custom.CSS contient:

.demofade ul {
display:inline-block;
margin:0 10px
}
.demofade li {
display:inline-block;
margin:0 10px
}

.demofade {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}

.demofade img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:0 0;
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.demofade img:hover {
opacity: 0.2;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}