이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

QA

이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

본문

아래 사진처럼 최신글 이미지에 제목이 나오게 하고 싶습니다..

어떻게 해야하는지 알려주시면 감사합니다..!..

 

 

 

2105789910_1623993648.4893.png

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$num = 6; // 메인 출력이미지 갯수
?>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0; cursor:pointer;border-radius:0px;}
.imgs{ width:100%; height:367px; border:20px solid #fff; margin:10px auto; position:relative; overflow:hidden;border-radius:20px;}
.imgs:hover li{ background:#ffffff;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs:hover img{ opacity:0.4;filter:alpha(opacity=60);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs li:hover img{ opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs0{ width:658px; height:321px; position:absolute; left:0; top:0;} 
.imgs1{ width:306px; height:166px; position:absolute; left:0; bottom:0;} 
.imgs2{ width:137px; height:166px; position:absolute; left:259px; bottom:0;} 
.imgs3{ width:137px; height:166px; position:absolute; left:405px; bottom:0;} 
.imgs4{ width:283px; height:157px; position:absolute; right:0; top:0;}
.imgs5{ width:137px; height:166px; position:absolute; right:0; bottom:0;}
</style>
<div class="imgs">
    <?php
    for ($i=0; $i<$num; $i++) {
        //메인 각 출력이미지 크기
        if($i =='0'){ //이미지 출력번호
            $img_w = "667"; // 썸네일 생성이미지 가로 크기
            $imgs_w = "395"; // 메인 출력 이미지 가로 크기
            $imgs_h = "153"; // 메인 출력 이미지 세로 크기
        }else if($i =='1'){
            $img_w = "333"; 
            $imgs_w = "250";
            $imgs_h = "153"; 
        }else if($i =='2'||$i =='3'){
            $img_w = "165";
            $imgs_w = "137";
            $imgs_h = "153";
        }else if($i =='4'){
            $img_w = "332";
            $imgs_w = "283";
            $imgs_h = "153";
        }else{
            $img_w = "332";
            $imgs_w = "137";
            $imgs_h = "153";
        }
            $img_h = "";
            $thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h);
        if($thumbs['src']) {
            $imgs = $thumbs['src'];
        }?>
    <li class="imgs<?=$i?>"><a href="<?php echo $list[$i]['wr_link1'];?>" title="<?=$list[$i]['subject']?>"><img src="<?=$imgs?>" width="<?=$imgs_w?>" 
    height="<?=$imgs_h?>" /></a></li>
    <?}?>
</div>

이 질문에 댓글 쓰기 :

답변 1


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$num = 6; // 메인 출력이미지 갯수
?>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0; cursor:pointer;border-radius:0px;}
.imgs{ width:100%; height:367px; border:20px solid #fff; margin:10px auto; position:relative; overflow:hidden;border-radius:20px;}
.imgs:hover li{ background:#ffffff;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs:hover img{ opacity:0.4;filter:alpha(opacity=60);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs li:hover img{ opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs0{ width:658px; height:321px; position:absolute; left:0; top:0;} 
.imgs1{ width:306px; height:166px; position:absolute; left:0; bottom:0;} 
.imgs2{ width:137px; height:166px; position:absolute; left:259px; bottom:0;} 
.imgs3{ width:137px; height:166px; position:absolute; left:405px; bottom:0;} 
.imgs4{ width:283px; height:157px; position:absolute; right:0; top:0;}
.imgs5{ width:137px; height:166px; position:absolute; right:0; bottom:0;}
.imgs li >  a{
    position: relative;
}
.imgs li > a >  p{
    position: absolute;
    z-index: 1;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}
</style>
<div class="imgs">
    <?php
    for ($i=0; $i<$num; $i++) {
        //메인 각 출력이미지 크기
        if($i =='0'){ //이미지 출력번호
            $img_w = "667"; // 썸네일 생성이미지 가로 크기
            $imgs_w = "395"; // 메인 출력 이미지 가로 크기
            $imgs_h = "153"; // 메인 출력 이미지 세로 크기
        }else if($i =='1'){
            $img_w = "333"; 
            $imgs_w = "250";
            $imgs_h = "153"; 
        }else if($i =='2'||$i =='3'){
            $img_w = "165";
            $imgs_w = "137";
            $imgs_h = "153";
        }else if($i =='4'){
            $img_w = "332";
            $imgs_w = "283";
            $imgs_h = "153";
        }else{
            $img_w = "332";
            $imgs_w = "137";
            $imgs_h = "153";
        }
            $img_h = "";
            $thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h);
        if($thumbs['src']) {
            $imgs = $thumbs['src'];
        }?>
    <li class="imgs<?=$i?>"><a href="<?php echo $list[$i]['wr_link1'];?>" title="<?=$list[$i]['subject']?>"><p><?=$list[$i]['subject']?></p><img src="<?=$imgs?>" width="<?=$imgs_w?>" 
    height="<?=$imgs_h?>" /></a></li>
    <?php }?>
</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 109
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT