Super fried chicken silky picture display frame

First take a look at the renderings:

Online preview reference big guy on the code:

html:

We’ll do it all using divs, focusing on the CSS style

<body>
<div class="container">
    <div class="panel active" style="background-image: url('./images/timg-001-01.png')">
        <h3>Explore The World</h3>
    </div>
    <div class="panel" style="background-image: url('./images/timg-001-02.png')">
        <h3>Wild Forest</h3>
    </div>
    <div class="panel" style="background-image: url('./images/timg-001-03.png')">
        <h3>Sunny Beach</h3>
    </div>
    <div class="panel" style="background-image: url('./images/timg-001-04.png')">
        <h3>City on Winter</h3>
    </div>
</div>
</body>
Copy the code

css:

That’s the big deal.

/* Load the font */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/* define how to calculate the total width and height of an element: border-box does not contain margin */
* {
    box-sizing: border-box;
}

/* Use flex layout */
body {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    display: flex;
    width: 90vw;
}

.panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    -webkit-transition: all 700ms ease-in;
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition: opacity 0.3 s ease-in 0.4 s;
}

@media (max-width: 480px) {
    .container {
        width: 100vw;
    }

    .panel:nth-of-type(4),
    .panel:nth-of-type(5) {
        display: none; }}Copy the code

js:

Add event

const panels = document.querySelectorAll('.panel')

panels.forEach(panel= > {
    panel.addEventListener('click'.() = > {
        removeActiveClasses()
        panel.classList.add('active')})})function removeActiveClasses() {
    panels.forEach(panel= > {
        panel.classList.remove('active')})}Copy the code

The general idea is that with flex properties in the Flex layout,

Flex is short for flex-grow,flex-shrink, and Flex-basis. The default value is 0, 1 auto.

Then add the click event and add an active class to the panel that you clicked on. Zoom in on the element you click to achieve the effect. Then I added a transition animation to add aesthetics.

  • Flex-grow: Defines the magnification scale of the project. Default is 0.
  • Flex-shrink: Defines the project shrink scale. Default is 1.
  • Flex-basis: Defines the main space that a project occupies before allocating excess space

Flex-grow changes to create a preview of the image, and then add the Transition transition animation, so a simple and useful preview box is created