이 예제에서 이미지를 밝게하는 가장 쉬운 방법

Question

정말 간단한 질문입니다. 정적 인 이미지가있어서 재미있게 만들고 싶습니다. 한 가지 방법은 오버레이의 일부 유형이있는 lighten입니다. 예를 들어 이미지 중 하나에 마우스를 올리면 http://www.cnn.com/interactive/2013/02/world/pope-contenders/index.html (번개 효과 만). 무엇 jquery에서 이것을 달성하기위한 가장 쉬운 전략은 무엇입니까? 당신이 CSS를 함께 할 수있는 사전

Answer 1

에서 작동한다는 것입니다 서로 내부 divs.

다른 방법으로 그림 <img/>을 넣을 수도 있습니다. 여기

<div class="img-container"> 
    <div class="img-overlay"></div> 
</div> 

당신이 필요로하는 CSS의 : 가 (. 내가 모든 이미지가) %에 (또는 당신이 상대적으로 설정할 수 있습니다 당신이 게시 된 링크로 CSS 속성을 같은 높이와 폭이 가정.)

.img-container { 
    position: relative; 
    width: 100px; /* your images widths */ 
    height: 200px; /* your images heights */ 
    background: url('path/to/your/image.png'); 
} 

.img-overlay { 
    position: absolute; 
    z-index: 5; /* it has just to be one more than the one above */ 
    width: 100px; /* your images widths */ 
    height: 200px; /* your images heights */ 
    display: none; 
    background-color: '#333333'; /* your color of choice */ 
    opacity: 0.8; 
} 

는 jQuery를 함께 할 :

$('.img-container').mouseEnter(function() { 
    $(this).children('.img-overlay').fadeIn('fast'); 
}).mouseLeave(function() { 
    $(this).children('.img-overlay').fadeOut('fast');  
}); 

는 이전 버전의 브라우저에서이 작품을 만들기 위해 IE에 대한 공급 업체 접두사 및 필터를 사용해야하는 점에 유의하십시오. 아주 오래된 IE 및 Safari 버전에 대해서도 비활성화하십시오.

Answer 2

에서

이

들으은

.myDiv:hover { 
    background-image:url(/path/to/transparent.png); /* width 1px, height 1px, the color and opacity you want*/ 
    background-repeat:repeat; 
} 

불투명도의 문제는 늘 두 넣어 가지고 IE7 (아마 또한 IE8)

Answer 3

이러한 종류의 효과는 CSS 자체로 쉽게 달성 할 수 있습니다. CSS의이 부분을 사용해보십시오.

img 
{ 
opacity:1.0; 
} 
img:hover 
{ 
opacity:0.4; 
} 

IE8 및 나중에 필터 사용 alpha(opacity=x);

Answer 4

불투명도 실제로 소자 자체에 적용될 때 호버 상태 "라이터"을하지 않을 것이다. 당신이 할 수있는 것은 img를 오버레이하기 위해 음수 여백 또는 z- 인덱스를 만드는 것입니다. 이 방법을 사용하면 흰색이 희미 해집니다. 아래는 흰색 bg가 없어도 항상 "밝게"효과를 얻을 수있는 수정 사항입니다.

는

<h3>Just Opacity</h3> 
<a href="#" class="one"><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" /></a> 

<h3>With an overlay</h3> 
<a href="#" class="two"><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" /></a> 
<a class="three">&nbsp;</a> 

는이보다 더 좋은 질문을 할 수

body { 
    background: #262626; 
} 
h3 { 
    color: white; 
} 
a:hover.one { 
    opacity: .5; 
} 
.two { 

} 
a.three { 
    width: 252px; 
    height: 250px; 
    background: #FFF; 
    display: block; 
    margin: -254px 0 0 0; 
    position: relative; 
    opacity: .0; 
} 
a:hover.three { 
    opacity: .7; 
}