test hover

1 1 1 1 1 Vote 0.00 (0 Votes)

Vote utilisateur: 0 / 5

Etoiles inactivesEtoiles inactivesEtoiles inactivesEtoiles inactivesEtoiles inactives
 

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").

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  Création d'un article

<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>

<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...

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;
}

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>