Quel code css pour faire apparaitre une fenetre latérale ?

Fermé
gasparaunavis Messages postés 44 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 28 octobre 2015 - 3 sept. 2014 à 10:14
gasparaunavis Messages postés 44 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 28 octobre 2015 - 3 sept. 2014 à 10:34
Bonjour,

Je voudrais faire apparaitre une page latérale en transparence, exactement comme pour le le site giorgibou.com, Page "About" et "View my resume".
lorsque l'on clique sur "View my resume", une page en transparence apparait sur le côté avec le CV de la jeune femme. C'est cet effet que je veux reproduire à l'identique. j'ai acheté le même théme mais c'est un petit plus que le webmaster ne propose pas dans son pack.
Quand j'affiche le code source de la page, j'ai une class "cv" qui apparait. Quel est selon vous le code css qui s'y rattache pour reproduire cet effet ?
Voici le code source ci-dessous
</ul>
<a class="folio-click hide-mobile">View my resume ›</a>
<a class="show-mobile" href="img/cv.jpg">View my resume ›</a>
</div>
<div class="inner-right">
<div class="hidden-page">
<img src="img/cv.jpg" class="cv" alt="cv">
</div>
</div>
merci de votre aide
Gaspar


A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 sept. 2014 à 10:28
Salut,

L'effet est déclenché en javascript (cf fin du document html) :
/* Show portfolio onclick */
$('.folio-click').click(function(){
  $('.hidden-page').removeClass('show-page');
  $('.hidden-page').addClass('show-page');
});


Les règles css sont disponibles dans le fichier stylesheets/screen.css, il suffit de chercher les classes correspondantes (notamment .hidden-page.show-page qui contient les animations pour l'effet de transition).

Bonne journée
0
gasparaunavis Messages postés 44 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 28 octobre 2015
3 sept. 2014 à 10:34
MERCIIIII c'est énorme ! enfin on y arrive ! MERCIiiiii Pitet !
0