What would be the structure of CSS. How to build this gallery template?

Question

What would be the structure of CSS. How to build this gallery template?

Asked 6 years ago

Viewed 98 times

0

I would like to know what CSS structure needs to be applied to get the increase of divs with a good transition of animation at CSS level of height and width, the internal content of the div does not need to occur, idea is to be similar to the link below:

https://www.wonderlandindustry.com/

Code I have so far:

main {
  height: 100vh;
}

.main_principal {
  height: 70vh;
  background: #0b4c81;
}

.main_cards {
  height: 30vh;
  background: #042a3f;
  display: -webkit-box;
  transition: all .5s;
}

.card {
  width: 20%;
  padding: 10px 7.5px;
  height: 100%;
  transition: all .5s;
  text-align: center;
  position: relative;
}


/*ANIMATION*/

.card:hover {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}


/*ANIMATION*/

.card_info {
  height: 100%;
  background: #0b4c81;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <main>
    <section class="main_principal"></section>
    <section class="main_cards">
      <div class="card">
        <div class="card_info">
          <span>Lorem Ipsum</span>
        </div>
      </div>
      <div class="card">
        <div class="card_info">
          <span>Lorem Ipsum</span>
        </div>
      </div>
      <div class="card">
        <div class="card_info">
          <span>Lorem Ipsum</span>
        </div>
      </div>
      <div class="card">
        <div class="card_info">
          <span>Lorem Ipsum</span>
        </div>
      </div>
      <div class="card">
        <div class="card_info">
          <span>Lorem Ipsum</span>
        </div>
      </div>
    </section>
  </main>
</body>

</html>

2

Analysis of external sites is not on site scope, but comments remain open if anyone wants to comment on the site in question. You can eventually [Edit] the question if you have any questions about the specific part of programming and, mainly, give more details than you want to do exactly so that the question does not depend on the external link. You might be interested in this: https://threejs.org/

– Bacco

2018/10/25 at 12:18
2

Jack taking this btn from + that keeps following the mouse the rest of the entire gallery you can do only with CSS, nor need JS to do this scheme with the images. As Bacco said edit your answer, post what you already have of code, what you have tried to do and what your doubt or difficulty in performing and so we can help you better.

– hugocsl

2018/10/25 at 12:21
You want it to look exactly like the reference site ? Or you want to follow the model you made, but just adjust some things, like don’t let the scroll bar on the page, and don’t let the image grow to?

– hugocsl

2018/10/25 at 14:09
1

That stay close to the structure of the site, I will follow this my template to stay next to the site.

– jack_rs

2018/10/25 at 14:17

1 answer

Browser other questions tagged css animation css-hover css-animations

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-26T12:01:43+00:00

Option 1 replicating gallery with css only

I made this model based on the example gallery, it is in flex, and the "trick" is that all items have flex:1, but when does the :hover passes to flex:2, as the height of 30vh for 40vh. The result is a super responsive gallery! Display tb in "Whole page"

Follow the code used to make the image above:

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
}
.wrapper {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    align-items: flex-end;
}
.box {
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin: 10px;
    height: 30vh;
    transition: all 500ms;
}
.box:hover {
    flex: 2;
    height: 40vh;
}
.box img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

<div class="wrapper">    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
    <div class="box">
        <img src="https://unsplash.it/100/100" alt="">
    </div>    
</div>

Option 2 using your code

Like you’re wearing it transform and spoke in the comment that intends to continue in this line I suggest you control how the element will "transform" using the transform-origen, so you control the first and last element to grow just inside the page!

.card:last-child {
  transform-origin: bottom right;
}

.card:first-child {
  transform-origin: bottom left;
}

In the example I also needed to use z-index image that grow always grow on top of others, and Usai a box-shadow in the finish, but this is perfumery, the main thing is to control how the scale() will work.

OBS: Here inside the Stackoverflow snippet is not cool, because your code is not fully responsive, but copy the code and test in your project that should work 100%

See below

main {
  height: 100vh;
}

.main_principal {
  height: 70vh;
  background: #0b4c81;
}

.main_cards {
  height: 30vh;
  background: #042a3f;
  display: -webkit-box;
  transition: all .5s;
}

.card {
  width: 20%;
  padding: 10px 7.5px;
  height: 100%;
  transition: all .5s;
  text-align: center;
  position: relative;
  transform-origin: bottom;
}

.card:last-child {
  transform-origin: bottom right;
}

.card:first-child {
  transform-origin: bottom left;
}

/*ANIMATION*/
.card:hover {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  z-index: 20;
  padding-bottom: 8px;
}

.card:hover .card_info {
  box-shadow: 0 0 10px black;
}

/*ANIMATION*/

.card_info {
  height: 100%;
  background: red;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  transition: all .5s;
}

<main>
  <section class="main_principal"></section>
  <section class="main_cards">
    <div class="card">
      <div class="card_info">
        <span>Lorem Ipsum</span>
      </div>
    </div>
    <div class="card">
      <div class="card_info">
        <span>Lorem Ipsum</span>
      </div>
    </div>
    <div class="card">
      <div class="card_info">
        <span>Lorem Ipsum</span>
      </div>
    </div>
    <div class="card">
      <div class="card_info">
        <span>Lorem Ipsum</span>
      </div>
    </div>
    <div class="card">
      <div class="card_info">
        <span>Lorem Ipsum</span>
      </div>
    </div>
  </section>
</main>