테스트 사이트 - 개발 중인 베타 버전입니다

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

다조아해 7년 전 조회 2,381

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

 

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

 

</strong></p>

<p><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>

<p>$imgwidth = 219; //표시할 이미지의 가로사이즈

$imgheight = 130; //표시할 이미지의 세로사이즈

?></p>

<p><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;}</p>

<p>

#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}</p>

<p>/* 폰트불러오기 */</p>

<p>

</style>

<div id="oneshot"></p>

<p> <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></p>

<p><strong>

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

답변 1개

채택된 답변
+20 포인트

</p>

<p>a img.img_left {</p>

<p>-webkit-filter: grayscale(100%);

filter: gray;</p>

<p>}</p>

<p> </p>

<p>a:hover img.img_left {</p>

<p>-webkit-filter: grayscale(0%);

filter: none;</p>

<p>}</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

다조아해
7년 전
우선 답변 주셔서 감사합니다.

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

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

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

로그인