It would be helpful to see the desired design, but just to fix the elements overlap you can remove position: absolute from a tag and add color to p tag with text, attached codepen with the final result: https://codepen.io/Liveindream/pen/zYxReOY
Solution 1 :
Problem :
My images of div tag covered footer tag. Here is several ways I tried but didn’t work:
- check the css of
justify-content:space-between - check the css
positionwhether effect this problem - check the css
z-indexwhether effect this problem - switch the tags containing images inline into blocks
And none of those did work….
#productteam>section>:nth-child(2)>section>.col3{width:100%;position:relative;}
#productteam>section>:nth-child(2)>section>.col3>:first-child{position:absolute;overflow:hidden;}
#productteam>section>:nth-child(2)>section>.col3>:first-child::before{content:"";width:100%;height:100%;
top:0;left:0;z-index:1;position:absolute;opacity:0;transition:all 0.5s 0.2s;
background-image:linear-gradient(to top, rgba(50,50,50,0.7) 20%, rgba(50,50,50,0.6) 30%,
rgba(50,50,50,0) 100%);}
#productteam>section>:nth-child(2)>section>.col3:hover>:first-child::before{opacity: 0.8;}
#productteam>section>:nth-child(2)>section>.col3>a{border-radius: 1rem;}
#productteam>section>:nth-child(2)>section>.col3>a>img{transition:all 0.2s;transform:scale(1);}
#productteam>section>:nth-child(2)>section>.col3:hover>a>img{transform:scale(1.2);}
#productteam>section>:nth-child(2)>section>.col3 p{top:14rem;left: 2rem; z-index: 2;position: absolute;
visibility: hidden;opacity: 0;transition: all 0.5s 0.2s;font-size: 1.25rem;font-style: italic;
font-weight: bold; color: white;line-height: 2rem;}
#productteam>section>:nth-child(2)>section>.col3:hover p{visibility: visible;opacity: 1;top:9rem;}<div id="productteam">
<section class="container paddingV2">
<div class="flexbox dividingLine flexDirectionC alignItemsCenter marginAll1">
<h1>Prodution Team</h1>
<h2>製作團隊</h2>
</div>
<div class="marginAll1">
<section class="flexbox justifyContentBetween">
<div class="col3 marginAll1">
<a href="#"><img src="images/productteam1.jpg" alt="藤林秀麿"></a>
<p>總監<br>
藤林秀麿</p>
</div>
<div class="col3 flexbox flexDirectionC marginAll1">
<a href="#"><img src="images/productteam2.jpg" alt="青沼英二"></a>
<p>製作人<br>
青沼英二</p>
</div>
<div class="col3 flexbox flexDirectionC marginAll1">
<a href="#"><img src="images/productteam3.jpg" alt="戶田昭吾"></a>
<p>編劇<br>
戶田昭吾</p>
</div>
<div class="col3 flexbox flexDirectionC marginAll1">
<a href="#"><img src="images/productteam4.jpg" alt="堂田卓宏"></a>
<p>程式<br>
堂田卓宏</p>
</div>
<div class="col3 flexbox flexDirectionC marginAll1">
<a href="#"><img src="images/productteam5.jpg" alt="瀧澤智"></a>
<p>美術<br>
瀧澤智</p>
</div>
<div class="col3 flexbox flexDirectionC marginAll1">
<a href="#"><img src="images/productteam6.jpg" alt="若井淑"></a>
<p>音樂<br>
若井淑</p>
</div>
</section>
</div>
</section>
</div>
<!-- 店鋪搜尋 著作商標 -->
<footer class="bgDarkgray">
<nav class="container">
<div>
<a href="#">footer</a>
<div>
</div>
</nav>
</footer>