이미지가 4장씩 두줄로 나오게 하고 싶어요
본문
어디를 어떻게 수정해야 할지 모르겠어요
--------------------------------------------------------------------------------------------------------
<?php if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<div class="sec section sec-tiles-3topimg1 white-">
<style>
.sec-tiles-3topimg1 { }
.sec-tiles-3topimg1 .header { margin-bottom:50px; }
.sec-tiles-3topimg1 ul { display:flex; justify-content:space-between; }
.sec-tiles-3topimg1 ul li { width:calc(33% - 55px); opacity:0; transform:translateY(200px); transition-duration:1s; }
.sec-tiles-3topimg1.active ul li { opacity:1; transform:translateY(0); }
.sec-tiles-3topimg1 ul li a { position:relative; display:block; padding-bottom:110%; color:#fff; background:none no-repeat center/cover; z-index:2; }
.sec-tiles-3topimg1 ul li a:before,
.sec-tiles-3topimg1 ul li a:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; background:rgba(0,0,0,.2); transition-duration:400ms; }
.sec-tiles-3topimg1 ul li a:after { opacity:0; }
.sec-tiles-3topimg1 ul li a:hover:after { opacity:1; background:rgba(0,0,0,.4); }
.sec-tiles-3topimg1 ul li a:hover { box-shadow:10px 10px 30px rgba(0,0,0,.3); }
.sec-tiles-3topimg1 ul li a > div { position:absolute; left:30px; right:30px; bottom:45px; }
.sec-tiles-3topimg1 ul li a .head { font-size:1.5rem; line-height:1.6; transition-duration:400ms; }
.sec-tiles-3topimg1 ul li a .plus { width:30px; height:30px; opacity:0; transition-duration:200ms; }
.sec-tiles-3topimg1 ul li a .plus:before,
.sec-tiles-3topimg1 ul li a .plus:after { content:""; position:absolute; background:#fff; }
.sec-tiles-3topimg1 ul li a .plus:before { width:100%; height:1px; top:50%; }
.sec-tiles-3topimg1 ul li a .plus:after { width:1px; height:100%; left:50%; }
.sec-tiles-3topimg1 ul li a:hover .head { bottom:90px; }
.sec-tiles-3topimg1 ul li a:hover .plus { opacity:1; }
@media (max-width: 1700px) {
.sec-tiles-3topimg1 ul li { width:calc(33% - 5px); }
}
@media (max-width: 1200px) {
.sec-tiles-3topimg1 ul li a > div { bottom:35px; }
.sec-tiles-3topimg1 ul li a .head { font-size:1.25rem; }
.sec-tiles-3topimg1 ul li a:hover .head { bottom:80px; }
}
@media (max-width: 1024px) {
.sec-tiles-3topimg1 .header { margin-bottom:30px; }
.sec-tiles-3topimg1 ul { flex-wrap:wrap; max-width:600px; margin:0 auto; }
.sec-tiles-3topimg1 ul li { width:100%; margin:5px 0; transform:translate(50%, 0); transition-duration:600ms; }
.sec-tiles-3topimg1.active ul li { transform:translate(0, 0); }
.sec-tiles-3topimg1 ul li a { padding-bottom:30%; }
.sec-tiles-3topimg1 ul li a > div { left:20px; right:20px; bottom:25px; }
.sec-tiles-3topimg1 ul li a .plus { width:20px; height:20px; }
.sec-tiles-3topimg1 ul li a:hover .head { bottom:55px; }
}
@media (max-width: 767px) {
.sec-tiles-3topimg1 ul li a { padding-bottom:35%; }
.sec-tiles-3topimg1 ul li a .head { font-size:1.125rem; }
}
</style>
<div class="c">
<div class="header">
<div class="subhead">LEGAL WORK</div>
<div class="head">의뢰인을 위한 전략적인 법률 솔루션을 제공합니다.</div>
</div>
<?php
$arr = array(
array('bg' => 'business6-sec4-img1.jpg', 'h' => '형사/성범죄/마약', 'href' => url_npage('work1') ),
array('bg' => 'business6-sec4-img2.jpg', 'h' => '음주운전/교통사고', 'href' => url_board('work2') ),
array('bg' => 'business6-sec4-img3.jpg', 'h' => '민사/손해배상', 'href' => url_npage('work3') ),
array('bg' => 'business6-sec4-img4.jpg', 'h' => '이혼/상속', 'href' => url_npage('work4') ),
array('bg' => 'business6-sec4-img5.jpg', 'h' => '행정/학교폭력', 'href' => url_board('work5') ),
array('bg' => 'business6-sec4-img6.jpg', 'h' => '부동산/건설', 'href' => url_npage('work6') ),
array('bg' => 'business6-sec4-img7.jpg', 'h' => '금융(PF)', 'href' => url_npage('work7') ),
array('bg' => 'business6-sec4-img8.jpg', 'h' => '기업법무/자문', 'href' => url_npage('work8') ),
);
?>
<ul>
<?php for ($i=0; $i<count($arr); $i++) {
$item = $arr[$i];
?>
<li class="scr-delay scr-fadeinup" style="transition-delay:<?php echo 0.3+($i+1)*0.2?>s">
<a class="a" href="<?php echo $item['href']?>" title="<?php echo $item['h']?>" style="background-image:url('<?php echo G5_THEME_IMG_URL?>/<?php echo $item['bg']?>');">
<div class="head"><?php echo $item['h']?></div>
<div class="plus"></div>
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
답변 2
아래의 내용을 한번 참고해 보시겠어요..
.sec-tiles-3topimg1 {
text-align: center;
}
.sec-tiles-3topimg1 ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
}
.sec-tiles-3topimg1 ul li {
width: calc(25% - 10px);
margin: 5px;
box-sizing: border-box;
list-style: none;
opacity: 0;
transform: translateY(200px);
transition-duration: 1s;
}
.sec-tiles-3topimg1.active ul li {
opacity: 1;
transform: translateY(0);
}
.sec-tiles-3topimg1 ul li a {
position: relative;
display: block;
padding-bottom: 100%;
color: #fff;
background: none no-repeat center/cover;
z-index: 2;
}
.sec-tiles-3topimg1 ul li a:before,
.sec-tiles-3topimg1 ul li a:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: rgba(0, 0, 0, .2);
transition-duration: 400ms;
}
.sec-tiles-3topimg1 ul li a:after {
opacity: 0;
}
.sec-tiles-3topimg1 ul li a:hover:after {
opacity: 1;
background: rgba(0, 0, 0, .4);
}
.sec-tiles-3topimg1 ul li a:hover {
box-shadow: 10px 10px 30px rgba(0, 0, 0, .3);
}
.sec-tiles-3topimg1 ul li a > div {
position: absolute;
left: 30px;
right: 30px;
bottom: 45px;
}
.sec-tiles-3topimg1 ul li a .head {
font-size: 1.5rem;
line-height: 1.6;
transition-duration: 400ms;
}
.sec-tiles-3topimg1 ul li a .plus {
width: 30px;
height: 30px;
opacity: 0;
transition-duration: 200ms;
}
.sec-tiles-3topimg1 ul li a .plus:before,
.sec-tiles-3topimg1 ul li a .plus:after {
content: "";
position: absolute;
background: #fff;
}
.sec-tiles-3topimg1 ul li a .plus:before {
width: 100%;
height: 1px;
top: 50%;
}
.sec-tiles-3topimg1 ul li a .plus:after {
width: 1px;
height: 100%;
left: 50%;
}
.sec-tiles-3topimg1 ul li a:hover .head {
bottom: 90px;
}
.sec-tiles-3topimg1 ul li a:hover .plus {
opacity: 1;
}
@media (max-width: 1700px) {
.sec-tiles-3topimg1 ul li {
width: calc(25% - 10px);
}
}
@media (max-width: 1200px) {
.sec-tiles-3topimg1 ul li a > div {
bottom: 35px;
}
.sec-tiles-3topimg1 ul li a .head {
font-size: 1.25rem;
}
.sec-tiles-3topimg1 ul li a:hover .head {
bottom: 80px;
}
}
@media (max-width: 1024px) {
.sec-tiles-3topimg1 .header {
margin-bottom: 30px;
}
.sec-tiles-3topimg1 ul {
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
.sec-tiles-3topimg1 ul li {
width: calc(50% - 10px);
margin: 5px;
transform: translate(50%, 0);
transition-duration: 600ms;
}
.sec-tiles-3topimg1.active ul li {
transform: translate(0, 0);
}
.sec-tiles-3topimg1 ul li a {
padding-bottom: 50%;
}
.sec-tiles-3topimg1 ul li a > div {
left: 20px;
right: 20px;
bottom: 25px;
}
.sec-tiles-3topimg1 ul li a .plus {
width: 20px;
height: 20px;
}
.sec-tiles-3topimg1 ul li a:hover .head {
bottom: 55px;
}
}
@media (max-width: 767px) {
.sec-tiles-3topimg1 ul li a {
padding-bottom: 70%;
}
.sec-tiles-3topimg1 ul li a .head {
font-size: 1.125rem;
}
}
.sec-tiles-3topimg1 ul li { width:calc(33% - 55px); ... }
해당 부분을 수정해보세요.
ex) width: calc(25% - 82.5px)
ex) -55px은 여백일 겁니다.
확인 후 잘 되시면 채택 한번 부탁드립니다^^