Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="content">
  <div class="fleche gauche">
    〈
  </div>
  <div class="fleche droite">
    ⟩
  </div>
  <div id="slide">
    <div class="article">

      <img class="imagasiat" src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" alt="asiat">
    </div>
    <div class="article">
      <ul id="textasiat" class="niveau1 textasiat">
        <li>
          <a href="#">Sabrina<br>Dacos</a>
        </li>
      </ul>
      <img class="niveau2 imagasiat" src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" alt="Sabrina Dacos">
    </div>
    <div class="article">
      <ul id="textasiat3" class="niveau3 textasiat">
        <li>
          <a href="#">Richard<br>Kern</a>
        </li>
      </ul>
      <img class="niveau4 imagasiat2" src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" alt="Richard Kern">
    </div>
    <div id="ancre_2" class="article">
      <a href="#" class="amber">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" alt="fond">
        <h1>Natacha Merritt</h1>
      </a>
    </div>
    <div class="article">
      <a class="a-img-txt" href="">
        <img class="a-img" src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" alt="Richard Kern">
        <span class="a-txt c1">Richard Kern</span>
      </a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
              
            
!

CSS

              
                body{margin:0;}
*{box-sizing:border-box;}
#content
{
	margin:0em auto;
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:0em;
	text-decoration: none;
	height: 100vh;
	background-color: #cab2a3;
}

#slide
{
	height:100%;
}

.article
{
height:100%;
  display:grid;
  align-items:center;
}

.fleche
{
	position:absolute;
	top:50%;
	font-size:8em;
	line-height:1em;
	color:white;
	cursor:pointer;
	z-index: 99999999;
}

.fleche:hover
{
	color:red;
}

.droite
{
	right:0;
}

.gauche
{
	left:0;
}

#sliderNoSmoking
{
	max-height: 100%;
	text-decoration: none;
	z-index : 9999;
}

/*Slider */
ul
{
	list-style:none;
}

#textasiat
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;
	float: left;
	z-index: 99999;
	font-size: clamp(1em,8vw, 20vh);
	line-height: 8vw;
}

#textasiat li a
{
	color:white;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: none;
	z-index: 99;
}

#textasiat li a:hover
{
	color: #cecece;
}

#textasiat2
{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: clamp(1em,6vw, 17vh);
	line-height: 6vw;
	margin-top: 0px;
}

#textasiat2 li
{
	font-size: clamp(1em,8vw, 20vh);
	line-height:6vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

#textasiat2 li a
{
	font-size: clamp(1em,8vw, 20vh);
	line-height:8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	-webkit-transition: color 2s, font-size 2s;
	-moz-transition: color 2s, font-size 2s;
	-o-transition: color 2s, font-size 2s;
	transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover
{
	font-size:20vw;
	color: #cecece;
}

#textasiat2 li.designer
{
	font-size: 3vw;
	color: white;
	transition: color 2s, font-size 2s;
	line-height: 4vw;
}

#textasiat2 li.designer:hover
{
	font-size: 10vw;
	color: #cecece;
}

#textasiat3 li a
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	color: white;
	z-index: 99999;
	font-size: clamp(1em,8vw, 20vh);
	line-height: 8vw;
	text-decoration: none;
	text-shadow: 2px 2px 4px #000000;
}

#textasiat3 li a:hover
{
	color: #cecece;
}

#imagasiat
{
	bottom: 0;
	position: absolute;
	z-index: 999;
	transition: transform .3s ease-out;
	vertical-align: middle;
}

.imagasiat
{

	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	vertical-align: middle;
	transition: transform .3s ease-out;
}

.imagasiat2
{
	max-height: 100%;
	text-align: center;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	opacity: 0;
	transition: all 1.5s ease-in-out;
	vertical-align: middle;
}

.niveau1:hover + .niveau2
{
	transform: scale(2.5);
}

.niveau1:hover + .niveau2
{
	transform: scale(2.5);
}

.imagasiat2
{
	max-height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	border: 1vw solid #000000;
	vertical-align:middle!important;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 3s, visibility 0s 0.5s;
}

.niveau3:hover + .niveau4
{
	opacity: 1;
	visibility: visible;
	transition: all 2s ease-in-out;
}

.animClass
{
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

.amber
{
	position: relative;
	top:0;
	left: 0;
	display: block;
}

.amber img
{
	max-width: 90vw;
	object-fit: cover;
	box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
	display: block;
	transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	margin-top: -100px;
	margin-left: 0px;
	border: 1vw solid #000000;
	margin-right: 0px;
	text-align: center;
}

.amber:hover img
{
	box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
	margin-top: 20px;
	margin-left: 20%;
}

.amber h1
{
	position: absolute;
	transform: translate(10%, -600%);
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	z-index: 99999;
	font-size: clamp(1em,8vw, 20vh);
	line-height: 8vw;
	margin: 20%;
	text-decoration: none;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

.amber h1:hover
{
	color: #cecece;
}

.a-img-txt
{
	display:grid;
}

/* les enfants se superposent */
.a-img-txt>*
{
	grid-area:1/1/-1/-1;
	/* raccourci pour grid-row et grid-column */
}

.a-img
{
	max-height: 100vh;
	top: 0px !important;
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 1vw solid #000000;
	z-inde: 9999;
}

/* le texte */
.a-txt
{
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	opacity:0;
	filter:invert(0);
	/* antibug si effet sur a-img */
	transition:opacity .8s;
	padding: 0;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	z-index: 99999;
	font-size: clamp(1em,8vw, 20vh);
	line-height: 8vw;
}

/* les couleurs c1 et c2 */
.c1
{
	background:#ff6600cc;
	/* avec alpha */
}

.c2
{
	background:#6600ffcc;
	/* avec alpha */
}

/* le survol */
.a-txt:hover
{
	opacity:1;
	text-shadow: 2px 2px 4px #000000;
}

.a-img-txt:hover .a-img
{
	filter:invert(0);
}

.imagasiat
{
	width:auto;
	margin-right: 0;
	display:block;
	margin:auto;
	text-align:center;
	float:none;
	clear:both;
}

.imagasiat2
{
	width:auto;
	padding-right: 0;
	display:block;
	margin:auto;
	text-align:center;
	float:none;
	clear:both;
}

              
            
!

JS

              
                

// les liens doivent être ordonnés
$(function () {
  var listLien = $('#nav a'),
      enCours  = 0,
      oSlide   = $('#slide'),
      lstSlide = oSlide.children(),  // $('#slide div')
      nbrSlide = lstSlide.length;
 
  // affectation dynamique du CSS
  oSlide.css(
    { 'width':(100 *nbrSlide) +'%',
      'position': 'relative'
    });
  lstSlide.each( function(){
    $(this).css(
      { 'width': 100/nbrSlide +'%',
        'float': 'left'
      });
  });
 
  // fct de déplacement commune
  function moveSlide(pos){
    // déplacement conteneur
    oSlide.animate({
        'left': ( -pos *100) +'%'
      }, 'slow');
     // mémorise position en cours
     enCours = pos;
     // affichage ou non des fléches
     $('.gauche')[enCours === 0 ? 'hide' : 'show']('slow');
     $('.droite')[enCours === nbrSlide-1 ? 'hide' : 'show']('slow');
  }
 
  // gestion des clics sur les liens
  listLien.on( 'click', function(){
    // déplace le conteneur à la position de l'ancre
    moveSlide( listLien.index(this));
    // inibe le lien
    return false;
  });
 
  // gestion des clics sur les flèches
  $('.fleche').on('click',function(){
    var inc  = $(this).hasClass('droite') ? 1 : -1,   // incrément suivant cas
        next = enCours + inc;
    // si déplacement autorisé
    if( next > -1 && next < nbrSlide){
      moveSlide( next);
    }
  });
  // uniquement pour l'affichage des fléches
  moveSlide(enCours);
});

              
            
!
999px

Console