image show with CSS Grid

In this example below you will see how to do a image show with CSS Grid with some HTML / CSS and Javascript

https://tympanus.net/codrops/2017/07/19/css-grid-layout-slideshow/.grid { display: grid;

Thumbnail
This awesome code was written by hmmh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hmmh ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>image show with CSS Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <h2 class="grid__item grid__item--name">Oyo<br/> Expo <br/>2017</h2>
    <h3 class="grid__item grid__item--title">Belfast</h3>
    <p class="grid__item grid__item--text">A reet bobbydazzler a right toff Sherlock Queen Elizabeth Shakespeare</p>
  </div>
</main>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hmmh/image-show-with-css-grid-NYabpR */
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  --body-text: #333;
  --body-bg: #ccd8e4;
  --link-text: #ef3b3b;
  --link-text-hover: #333;
  --grid-name-text: #ef3b3b;
  --grid-title-text: #ef3b3b;
  --grid-nav-text: #fff;
  --grid-nav-bg: #442ef4;
  --grid-nav-text-hover: #fff;
  --grid-nav-bg-hover: #1f1f1f;
  --grid-text: #333;
  --gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 600px;
  color: #333;
  color: var(--body-text);
  background: #ccd8e4;
  background: var(--body-bg);
}

a {
  text-decoration: none;
  color: #ef3b3b;
  color: var(--link-text);
  outline: none;
}
a:hover, a:focus {
  color: #333;
  color: var(--link-text-hover);
}

/* Icons */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

/* Grid */
.grid {
  width: calc(100% - 6em);
  height: calc(100vh - 6em);
  pointer-events: none;
  position: absolute;
  top: 3em;
  left: 3em;
  pointer-events: auto;
}
.grid__item {
  position: relative;
  padding: 1em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transition: transform 0.2s ease-out;
}
.grid__item--name, .grid__item--title, .grid__item--text {
  pointer-events: none;
  padding: 0;
  margin: 0;
}
.grid__item--name, .grid__item--title {
  text-transform: uppercase;
  line-height: 0.8;
  font-family: 'Kanit', sans-serif;
}
.grid__item--name {
  font-size: 7vw;
  color: #ef3b3b;
  color: var(--grid-name-text);
}
.grid__item--title {
  font-size: 3.5vh;
  text-transform: uppercase;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  color: #ef3b3b;
  color: var(--grid-title-text);
}
.grid__item--text {
  font-size: 0.85em;
  line-height: 1.2;
  display: flex;
  color: inherit;
  color: var(--grid-text);
}
.grid__item:first-child {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/2.jpg);
}
.grid__item:nth-child(2) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/4.jpg);
}
.grid__item:nth-child(3) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/6.jpg);
}
.grid__item:nth-child(4) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/8.jpg);
}
.grid__item:nth-child(5) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/10.jpg);
}
.grid__item:nth-child(6) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/12.jpg);
}
.grid__item:nth-child(7) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/14.jpg);
}
.grid__item:nth-child(8) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/16.jpg);
}
.grid__item:nth-child(9) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/18.jpg);
}
.grid__item:nth-child(10) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/20.jpg);
}
.grid__item:nth-child(11) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/22.jpg);
}
.grid__item:nth-child(12) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/3.jpg);
}
.grid__item:nth-child(13) {
  background-image: url(https://tympanus.net/Development/GridLayoutSlideshow/img/5.jpg);
}

@media screen and (max-width: 60em) {
  .grid {
    height: auto;
    top: auto !important;
    width: 100%;
    left: auto !important;
    padding: 0 2em;
    margin: 0 0 5em;
  }
  .grid__item {
    min-height: 50px;
  }
  .grid__item br {
    content: '';
    display: none;
  }
  .grid__item--name, .grid__item--title, .grid__item--text {
    justify-content: flex-start;
    min-height: 0;
    padding: 1vh 0;
    text-align: left !important;
  }
  .grid__item--title {
    writing-mode: horizontal-tb;
  }
}
/* CSS Grid Styling */


/*Downloaded from https://www.codeseek.co/hmmh/image-show-with-css-grid-NYabpR */
/*
AUFGABE:
--------
1. Wenn du dieses Layout umsetzen möchtest, dann lass dir von Kristin oder Dennis einen Ausdruck geben, wie das ganze am Ende aussehen soll.

2. Schon responsive mit umgesetzt? Wenn nicht, dann denk dir jetzt was schickes aus!


HINWEIS:
--------
1. Zum Lösen dieser Aufgaben benötigst du folgende Eigenschaften:
- grid-auto-row
- grid-auto-column
- justify-content
- align-content
- grid-gap
- grid-area
- grid-column
- grid-row
- fraction
- auto-fill
- minmax

2. Ein vollständiger Guide für CSS Grids zum Nachlesen der Eigenschaften, findest du unter: 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
*/

Comments