최근게시물노출에서
관련링크
본문
최근게시물을 갤러리로 노출했습니다.
근데 이미지위에 반투명을오 제목을 노출시키고 싶은데 이건 어떻게 해야되나요?
좀 알려주세요 
답변 4
css 는
.img_set span {
position: absolute;
z-index: 999;
color: #fff;
background-color: #000;
opacity: 0.6;
padding: 5px 0 5px 12px;
width: 202px;
height: 30px;
margin-top: -40px;
} 추가 해주시고 (올려주신 라인의 18라인 이후에 (반영해보니 이상해서 수정함))
텍스트 출력을 위해
<div class="img_set">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $imgwidth, $imgheight);
if($thumb['src']) {
$img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
} else {
$img_content = 'NO IMAGE';
}
echo $img_content;
echo "<span>".$list[$i]['subject]."</span>";
?>
</a>
</div>
붉은색 글씨 추가해주세요.
정말 감사합니다 알려주신 소스덕분에 해결은 했는데요 혹시 마우스를 가저다대면 제목이 나오게 소스를 바꿀수가 있을까요?
해당 홈페이지 가서 개발자도구로 대충 해봤는데..
이렇게 하면 되지 않을까 싶네요
ex)
<div class="img_set">
<a href="http://shownent3.cafe24.com/bbs/board.php?bo_table=0301&wr_id=4">
<img class="img_left" src="http://shownent3.cafe24.com/data/file/0301/thumb-1889215889_WTknFYPp_PALACE-bleu_214x207.jpg" alt="dddd" width="214" height="207" title="">
<span style="
position: relative;
z-index: 999;
top: -15%;
color: #fff;
background-color: #000;
opacity: 0.6;
padding: 15px 40px 15px 40px;
">엘레강스한 아이템</span>
</a>
</div>
보이는건 대략 이렇게 보일거예요
이걸 프로그램상에서 뿌려지게 할려면 어떻게 해야되나요?
해당소스는
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$imgwidth = 214; //표시할 이미지의 가로사이즈
$imgheight = 207; //표시할 이미지의 세로사이즈
?>
<style>
#oneshot { position:relative;margin:0 0 0 -5px;}
#oneshot .la_title{position:absolute; left:0; top:0; z-index:100; background:#000; padding:5px; font-size:1em; color:#fff;margin:0 0 0 5px;filter:alpha(opacity=50);opacity:.5;}
#oneshot .img_set{width:<?php echo $imgwidth ?>px; height:<?php echo $imgheight ?>px; background:#fafafa;padding:0;}
#oneshot .subject_set{width:<?php echo $imgwidth - 13 ?>px; padding:-1px 10px 10px 0px; z-index:1; bottom:0; left:0; }
#oneshot .subject_set .sub_title{color:#333;height:17px;overflow:hidden;padding:3px 0 0 0;font-size:1.2em;font-family:NanumBarunGothic,dotum;}
#oneshot .subject_set .sub_content{color:#8c8a8a;height:30px;overflow:hidden;padding:3px 0 0;font-family:NanumGothic,dotum;}
#oneshot ul {list-style:none;clear:both;margin:0;padding:0;}
#oneshot li{float:left;list-style:none;text-decoration:none;padding:0 0 0 5px}
.subject_set a:link, a:visited {color:#333;text-decoration:none}
.subject_set a:hover, a:focus, a:active {color:#e60012;text-decoration:none}
/* 폰트불러오기 */
@font-face {font-family:'NanumBarunGothic';src: url('<?php echo $latest_skin_url ?>/NanumBarunGothic.eot');}
@font-face {font-family:'NanumGothic';src: url('<?php echo $latest_skin_url ?>/NanumGothic.eot');}
</style>
<div id="oneshot">
<div class="la_title"><?php echo $bo_subject ?></div>
<ul>
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<div class="img_set">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $imgwidth, $imgheight);
if($thumb['src']) {
$img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
} else {
$img_content = 'NO IMAGE';
}
echo $img_content;
?>
</a>
</div>
<div class="subject_set">
<!--<div class="sub_title"><a href="<?php echo $list[$i]['href'] ?>"><?php echo cut_str($list[$i]['subject'], 23, "..") ?></a></div>
<div class="sub_content"><?php echo get_text(cut_str(strip_tags($list[$i][wr_content]), 65, '...' )) ?></div>-->
</div>
</li>
<?php } ?>
</ul>
</div>
