최근 이미지 마우스 오버스 흑백으로 나오게 할려면
본문
최근 이미지에 마우스를 올리면 흑백으로 나오게 할려면 어떻게 해야 할까요?
아래 소스가 최근글 읽어오는 소스입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$imgwidth = 219; //표시할 이미지의 가로사이즈
$imgheight = 130; //표시할 이미지의 세로사이즈
?>
<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; height:39px; padding:5px 3px 3px 3px; z-index:1; bottom:0; left:0;}
#oneshot .subject_set .sub_title{color:#333;height:39px;overflow:hidden;padding:3px 0 0 0;font-size:1em;font-family:ngeot;text-align:center}
#oneshot .subject_set .sub_content{color:#8c8a8a;height:20px;overflow:hidden;padding:3px 0 0;font-family:ngeot;}
#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 10px}
.subject_set a:link, a:visited {color:#333;text-decoration:none}
.subject_set a:hover, a:focus, a:active {color:#e60012;text-decoration:none}
/* 폰트불러오기 */
</style>
<div id="oneshot">
<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'], 18, "..") ?></a><? if(isset($list[$i]['icon_new'])) echo " " . $list[$i]['icon_new'];?></div>
</div>
</li>
<?php } ?>
</ul>
</div>
<div style="clear:both;"></div>
답변 1
a img.img_left {
-webkit-filter: grayscale(100%);
filter: gray;
}
a:hover img.img_left {
-webkit-filter: grayscale(0%);
filter: none;
}
우선 답변 주셔서 감사합니다.
알려주신 소스를 상단 style에 추가 했는데 아무런 반응이 없네요.
답변을 작성하시기 전에 로그인 해주세요.
