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

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

QA

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

답변 1

본문

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

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

 

 

 

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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 109
© SIRSOFT
현재 페이지 제일 처음으로