pro1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expanding cards</title>
    <link rel="stylesheet" href="css.css">

</head>
<body>
<div class="countainer">
    <div class="panel active"style="background-image: url('https://s6.uupload.ir/files/nmojrlo-bleach-wallpaper-1920x1080_x8mg.jpg')">
        <h3>Korosaki ichigo</h3>
    </div>
    <div class="panel" style="background-image: url('https://s6.uupload.ir/files/432_x97q.jpg')">
        <h3>Ken Kaneki</h3>
    </div>
    <div class="panel" style="background-image: url('https://s6.uupload.ir/files/3450369_gk65.jpg')">
        <h3>Itachi Ochiha</h3>
    </div>
    <div class="panel" style="background-image: url('https://s6.uupload.ir/files/1371932_rxz.jpg')">
        <h3>Yagami Light</h3>
    </div>
    <div class="panel" style="background-image: url('https://s6.uupload.ir/files/5252455_jpzm.jpg')">
        <h3>Jojotso Kaizen</h3>
    </div>
</div>
<script src="java.js"></script>
</body>
</html>
*{
    box-sizing: border-box;
}
body{
    display: flex;
    align-items: center;
    height: 100vh;
    font-family: Arial,sans-serif;
    justify-content: center;
    overflow:hidden;
    margin: 0;
  
}
.countainer{
    display: flex;
    width: 90vw;
}
.panel{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 40px;
    cursor: pointer;
    flex: .5;
    margin:5px ;
    position: relative;
    -webkit-transition:all 700ms ease-in;

}
.active{

}
.panel h3{
    color: gold;
    font-size: 20px;
    position: absolute;
    opacity: 0;
    bottom: 20px;
    left: 20px;
    margin: 0;
}
.panel.active{
    flex: 5;
}
.panel.active h3{
    opacity: 1;
    color: gold;
    transition:opacity 0.3 ease-in 0.4s ;

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

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */
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')
    })
}
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...