画像をマウスの上に置いたときに画像を強調表示するにはどうすればよいですか？

Question

イメージをマウスでマウスの上に置くと、イメージが暗くなります。画像は六角形です。私はブロックとして動作するようにしました。どのようにして、六角形の画像上にのみハイライトを表示させるのですか？

#container{ 
position: relative; 
width: 687px; 
height: 612px; 
} 
#main_image img{ 
width: 100%; 
height: 100%; 
background: #03CE7B; 
} 
#nutrition_icon img{ 
position: absolute; 
bottom: 369px; 
right: 300px; 
} 

#nutrition_icon_text 
{ 
position:absolute;  
color:white; 
font-size:22px; 
font-weight:bold; 
left:230px; 
bottom:435px; 
} 

#wrap { 
position:relative; 
width: 200px; 
height: 145px; 
border: 1px solid grey 
} 

.nutrition_cover { 
height: 200px; 
width: 180px; 
position: absolute; 
top: 30px; 
left: 200px; 
background: rgba(0,0,0,.7); 
display:none; 
} 

#nutrition_icon:hover .nutrition_cover { 
display:block;  
} 

JSFiddleリンクhttps://jsfiddle.net/konpoly/rf84f6dt/

Answer 1

ハイライトこのスクリプトは鈍いイメージを作り、あなたはそれの上にマウスを置いたときに、それを元のサイズに来るマウスオーバー 上の画像。逆も可能ですか？通常の状態の画像と似ていますが、その上にマウスを置くと暗くなります。ありがとうございました。

<SCRIPT language="JavaScript1.2"> 
 
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development 
 
function makevisible(cur,which){ 
 
strength=(which==0)? 1 : 0.2 
 
if (cur.style.MozOpacity) 
 
cur.style.MozOpacity=strength 
 
else if (cur.filters) 
 
cur.filters.alpha.opacity=strength*100 
 
} 
 
// --> 
 
</SCRIPT> 
 
<img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">

Answer 2

Demo fiddle

#container{ 
 
     position: relative; 
 
     width: 687px; 
 
     height: 612px; 
 
    } 
 
    #main_image img{ 
 
     width: 100%; 
 
     height: 100%; 
 
     background: #03CE7B; 
 
    } 
 
    #nutrition_icon img{ 
 
     position: absolute; 
 
     bottom: 369px; 
 
     right: 300px; 
 
    } 
 

 
    #nutrition_icon_text 
 
    { 
 
     position:absolute;  
 
     color:white; 
 
     font-size:22px; 
 
     font-weight:bold; 
 
     left:230px; 
 
     bottom:435px; 
 
    } 
 

 
    #wrap { 
 
     position:relative; 
 
     width: 200px; 
 
     height: 145px; 
 
     border: 1px solid grey 
 
    } 
 

 
    .nutrition_cover { 
 
     height: 200px; 
 
     width: 180px; 
 
     position: absolute; 
 
     top: 30px; 
 
     left: 200px; 
 
     background: rgba(0,0,0,.7); 
 
     display:none; 
 
    } 
 

 
    /*#nutrition_icon:hover .nutrition_cover { 
 
     display:block;  
 
    }*/ 
 
    #nutrition_icon img:hover 
 
    { 
 
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ 
 
     filter: grayscale(100%); 
 
    }

<div id="container"> 
 
     <div id="main_image"> 
 
     <div class="tve_image_caption thrv_wrapper"><span class="tve_image_frame"> 
 
     <img src="http://www.cliniquevi.com/templates/clinique-vi/images/alveoles.png" alt="" class="" width="687"    height="612"></span></div> 
 
     </div> 
 
     <div id="nutrition_icon"> 
 
     <a href="http://vi.kmmagency.com/services/nutrition/1-2/" class="tveeee_active_hyperlink"> 
 
      <img src="http://www.cliniquevi.com/templates/clinique-vi/images/alveole-nutrition.png" alt=""> 
 
     </a> 
 
     <div class="nutrition_cover"></div> 
 
     </div> 
 
    </div>