1

Website: http://www.asia-hr.com > Home > Team > click on any faces

On my team section, when you click on a face, the bio is popping up. However, I am facing two problems: 1) It's going down very far on click, I would like to be more centered on the picture and bio. 2) I would like to have a slower transition

Do you have any ideas of what can be the issue and how can I fix it?

CSS:

.team-section{
    overflow:hidden;
    text-align:center;
    background: #34495e;
    padding: 60px;
}

.team-section h2{
    color: white;
}


.ps{
    margin-bottom: 40px;

}

.team-section .ps .p{
    width: 250px;
    height: 250px;
    overflow:hidden;
    border-radius: 50%;
    margin: 0 30px;
    display:inline-block;
    -webkit-border-radius: 50%;
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

}

.team-section .ps .p img{
    height: 100%;
    min-width: 100%;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    filter:grayscale(100%);
    transition: 0.5s all;
}

.team-section .ps .p img:hover{
    filter: none;
}

.team-section .section{
    width:600px;
    margin:auto;
    font-size: 20px;
    color:white;
    text-align: justify;
    height: 0;
    overflow: hidden;
}

.team-section .section:target{
    height: auto;
}

.team-section .name{
    display:block;
    font-size: 22px;
    text-align: center;
}


.stop-scrolling {
    height: 100%;
    overflow: hidden;
  }

HTML

<div class="team-section">
    <h2>Our Team</h2>
    <span class="border border-1"></span>
        <div class="ps">
                <div class="p">
                    <a href="#p1"><img src="./images/home/h1.jpg"></a>
                </div>
                <div class="p">
                    <a href="#p2"><img src="./images/home/h2.jpg"></a>
                </div>
                <div class="p">
                    <a href="#p3"><img src="./images/home/h3.jpg"></a>
                </div>
        </div>

        <div class="section" id="p1">
            <span class="name">Sophia Letana</span>
            <span class="border border-1"></span>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
        </div>

        <div class="section" id="p2">
            <span class="name">Francois Le Chene</span>
            <span class="border border-1"></span>
            <p>gh ghgh ghg sit, amet consectetur ghgh elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
        </div>

        <div class="section" id="p3">
            <span class="name">Steve Mansoa</span>
            <span class="border border-1"></span>
            <p>Lghgh ipsum gh sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
        </div>      
</div>

0 Answers0