Je vais aujourd’hui vous montrer comment réaliser l’effet de survol en CSS3 que vous avez pu voir dans la démo pour le bandeau en Javascript l’autre jour.

Vous pouvez donc tout de suite télécharger les fichiers source ou bien regarder le résultat en démo :

DémoFichiers sources

J’utilise dans cet exemple dans une fancybox pour le visionnage des images. Libre à vous d’utiliser la lightbox de votre choix, il en existe des dizaines sur le net. Si vous ne souhaitez pas vous servir d’une autre lightbox, tout est fourni dans les fichiers sources.

Je vais donc utiliser les transitions en CSS3 afin de rendre le survol des vignettes plus agréable et plus attractif. Le principe est assez simple et j’ai donc essayé de vous le schématiser.

L’effet se créé grâce à la réunion de deux triangles venant de part et d’autre de la vignette.

Pour chaque vignette, j’utilise une balise avec la class=”work”, une balise pour le triangle droit et une balise pour le triangle gauche.

La balise avec la class=”work” est en position:relative (de façon à pouvoir positionner en absolu nos triangles à gauche et à droite) et en overflow:hidden (afin de cacher tout ce qui est en dehors de la div .work, ici les deux triangles).

Voici l’explication de ce qui se passe entre la div class=”work” et le work en hover :

explications0
En hover
explications

Le code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Galerie avec effet de survol CSS3</title>

  <link rel="stylesheet" media="screen" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<!-- Inclure jQuery -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  	<!-- Inclure le script pour la molette pour la galerie si vous souhaitez l'utiliser -->
  <script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
  	<!-- Inclure le script de la fancybox -->
  <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox();

		});
	</script>

</head>
<body>


<!-- #conteneur-header a une width de 100%  -->
<div id="conteneur_header">
	<div id="header">
    
        <div id="logo"><img src="img/logo.png" /></div><!-- #logo -->
        
        <ul id="menu">
        
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Collection</a></li>
            <li><a href="#">Projets</a></li>
            <li><a href="#">Contact</a></li>
        
        </ul>
    
    </div><!-- #header -->
</div><!-- #conteneur_header -->

<div id="content">
<div id="works">
    
        <a id="example1" href="img/work-1.jpg"><div class="work">
            
            <img src="img/work-1.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Photographie<br />Paris</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-2.jpg"><div class="work">
            
            <img src="img/work-2.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Site<br />Claire La porta</span>
            
        </div><!-- .work -->
      	</a>
        
        <a id="example1" href="img/work-3.jpg"><div class="work" style="margin-right:0px">
            
            <img src="img/work-3.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Site<br />NL conseil</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-4.jpg"><div class="work">
            
            <img src="img/work-4.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Menu CSS3<br />Site Tamento</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-5.jpg"><div class="work">
            
            <img src="img/work-5.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Pagination<br />Template</span>
            
        </div><!-- .work -->
      	</a>
        
        <a id="example1" href="img/work-6.jpg"><div class="work" style="margin-right:0px">
            
            <img src="img/work-6.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Menu bar<br />l'escale</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-7.jpg"><div class="work">
            
            <img src="img/work-7.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Template<br />Nike</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-8.jpg"><div class="work">
            
            <img src="img/work-8.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Rendu 3D<br />Krakoul</span>
            
        </div><!-- .work -->
      	</a>
        
        <a id="example1" href="img/work-9.jpg"><div class="work" style="margin-right:0px">
            
            <img src="img/work-9.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Formulaire<br />Equilibre</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-10.jpg"><div class="work">
            
            <img src="img/work-10.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Accès<br />Equilibre</span>
            
        </div><!-- .work -->
        </a>
        
        <a id="example1" href="img/work-11.jpg"><div class="work">
            
            <img src="img/work-11.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Sketch<br />Ipad</span>
            
        </div><!-- .work -->
      	</a>
        
        <a id="example1" href="img/work-12.jpg"><div class="work" style="margin-right:0px">
            
            <img src="img/work-12.jpg" />
            <div class="triangle-gauche"></div><!-- .triangle-gauche -->
            <div class="triangle-droite"></div><!-- .triangle-droite -->
            <span>Réseaux sociaux<br />Template</span>
            
        </div><!-- .work -->
        </a>
    
  </div><!-- #works -->
    
</div><!-- #content -->

</body>
</html>

Le code css :

@charset "utf-8";
/* CSS Document */

body {
    background: url(../img/crossed_stripes.png);
    padding:0;
    margin:0;
    font-family: 'Din', Arial, "Trebuchet MS";
}

a img {
    border: none;
}

a {
    text-decoration: none;
    color: #6E052E;
}

#content {
    width: 1000px;
    font-family: 'Din', "Trebuchet MS";
    color :#FFF;
    margin: 0 auto;
    text-align: justify;
}

/* Contient le header avec un background noir transparent */

#conteneur_header {
	width:100%;
	height:134px;
	background:url(../img/transparency.png);
	position:fixed;
	z-index:9999;
	top:0;
}

#header {
    height: 134px;
	width:1000px;
	margin:0 auto;
    overflow: hidden;
}

#logo {
    margin-top: 20px;
    float: left;
}

ul#menu {
    list-style: none;
    float: right;
    margin-top: 60px;
}

ul#menu li {
    display: inline;
    margin-left: 80px;
}

ul#menu li a {
    color: white;
    text-transform: uppercase;
    font-size: 18px;
}

/* #works contient tous les travaux, le margin-top est élevé pour ne pas apparaitre sous le menu flottant */

#works {
    margin-bottom: 40px;
    overflow: hidden;
    margin-top: 165px;
}

#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
    width:311px;
    height: 292px;
    border: 4px solid #222;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 20px;
	margin-bottom:50px;
}

#works .work:hover {
    border: 4px solid #FFF;
}

#works .work img {
    
}

#works .work .triangle-droite {
    background: url(../img/triangle-droite.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à droite lorsqu'on n'est pas en :hover */
    right: -312px;
    bottom: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-droite {
	/* Voici la position du triangle à droite lorsqu'on est en :hover */
    right: 0;
    bottom: 0;
}

#works .work .triangle-gauche {
    background: url(../img/triangle-gauche.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à gauche lorsqu'on n'est pas en :hover */
    left: -311px;
    top: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-gauche {
	/* Voici la position du triangle à gauche lorsqu'on est en :hover */
    left: -1px;
    top: -1px;
}

#works .work span {
    color: #FFF;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    position: absolute;
    /* Voici la position du span lorsqu'on n'est pas en :hover */
    top: 125px;
    left: -280px;
    font-family: 'Din';
    background: #222;
    padding-left: 70px;
    padding-right: 8px;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 0px;
}

/*//////// FONTS /////////*/

@font-face{
        font-family: "Din";
        src: url("../fonts/din-webfont.eot");
        src: local("@"),url("../fonts/din-webfont.ttf") format("truetype");
}

@font-face{
        font-family: "Din-medium";
        src: url("../fonts/din_medium-webfont.eot");
        src: local("@"),url("../fonts/din_medium-webfont.ttf") format("truetype");
}

J’espère que ce tuto vous aura plu… Partagez et… Partagez encore