채택완료

최근 이미지 마우스 오버스 흑백으로 나오게 할려면

최근 이미지에 마우스를 올리면 흑백으로 나오게 할려면 어떻게 해야 할까요?

 

아래 소스가 최근글 읽어오는 소스입니다.

 

Copy
<?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개 / 댓글 1개

채택된 답변
+20 포인트

Copy
a img.img_left {

-webkit-filter: grayscale(100%);
filter: gray;

}

 

a:hover img.img_left {

-webkit-filter: grayscale(0%);
filter: none;

}

답변에 대한 댓글 1개

우선 답변 주셔서 감사합니다.

알려주신 소스를 상단 style에 추가 했는데 아무런 반응이 없네요.

답변을 작성하려면 로그인이 필요합니다.