CSS를 사용하여 마우스 오버시 오버레이 이미지

Question

hover를 편집 할 수 없기 때문에 첫 번째 이미지의 배경 불투명도가있는 작은 이미지로 이미지를 오버레이하려고합니다. CSS를 사용하면됩니다. 나는 이런 식으로 뭔가 될 것이라고 생각 만 CSS를 사용

<div class="image"> 
    <a href="http://www.example.com"> 
    <img src="/uploads/2016/08/img1.png" class="rggclImgCenter"> 
    </a> 
</div> 

:

.image:hover { 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
} 

을하지만 그것은 단지 이미지를 대체 할 다음

은 샘플 HTML입니다.

Answer 1

원래 이미지가 없으므로 내 이미지가 사용되었습니다. 이것이 도움이되는지 확인하십시오. 당신의 응답의 앤드류에 대한 https://jsfiddle.net/askptx0y/

.image:hover { 
 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
 
    background-repeat: no-repeat; 
 
    opacity: 1; 
 
} 
 
img:hover { 
 
    opacity: 0.5; 
 
}

<div class="image"> 
 
    <a href="http://www.example.com"> 
 
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter"> 
 
    </a> 
 
</div>

Answer 2

:hover에 :before 요소를 추가하십시오.

.image a:hover:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
} 

Answer 3

당신은 당신이 좋아하지 않을 경우 css pseudo element를 사용할 수있다 (또는 없다) HTML을 수정합니다.

는 CSS는 img 요소 여기

에 :before 또는 :after을 사용할 수 없습니다 awared 수있다하십시오 :

img { max-width: 300px; } /* the image dimension */ 

.image a { position: relative; display: inline-block; } /* allow :before element positioning easier */ 
.image a:hover:before { 
    position: absolute; 
    top: 30px; left: 40px; /* Where to put the overlay */ 
    display: inline-block; 
    content: ''; /* must have */ 
    width: 300px; height: 164px; /* size of the element */ 
    background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg'); /* URL of the image */ 
    background-size: 300px 164px; /* Resize the image as this dimension */ 
    opacity: .5; /* Transparent rate */ 
} 

당신은 https://jsfiddle.net/bq9khtz3/

Answer 4

만들기 이미지 투명성을 시도 할 수 있습니다 :

.image a:hover image { 
    opacity: 0; 
} 

배경 화면 표시

.image a:hover { 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
    /* add other properties */ 
} 

Answer 5

.image:hover img { 
    -webkit-filter: brightness(40%); 
    -moz-filter: brightness(40%); 
    -ms-filter: brightness(40%); 
    -o-filter: brightness(40%); 
} 
.image:hover img:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png'); 
}