CSS에서 이미지 위에 오버레이를 만드는 방법은 무엇입니까?
나는 다음과 같은 것을 성취하려고 노력하고 있습니다.
이미지 위로 마우스를 가져 가면 해당 이미지에 텍스트와 아이콘이있는이 어두운 색상을 적용하고 싶습니다.
나는 여기에 갇혀있다. 몇 가지 자습서를 찾았지만이 경우에는 작동하지 않았습니다. 또한 또 다른 문제는 모든 이미지의 높이가 다릅니다. 너비는 항상 동일합니다.
이 효과를 어떻게 얻을 수 있습니까?
이 간단한 CSS / HTML로이를 달성 할 수 있습니다.
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
데모 : http://jsfiddle.net/6Mt3Q/
UPD : 여기에 몇 가지 추가 스타일이있는 멋진 최종 데모가 있습니다.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
이를 위해 의사 요소를 사용할 수 있으며 마우스 오버에 이미지를 가질 수 있습니다.
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
이것에 대해서는 조금 늦었지만 오버레이 방법을 검색 할 때이 스레드가 Google에 상위 결과로 나타납니다.
간단히 사용할 수 있습니다. background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
두 번째 이미지를 가져 와서 곱하기 혼합 모드를 사용하여 배경색과 혼합 한 다음 화면 혼합 모드를 사용하여 첫 번째 이미지와 두 번째 이미지 및 배경색을 혼합합니다. 오버레이를 구현하는 데 사용할 수있는 16 가지 블렌드 모드가 있습니다.
곱하기, 화면, 오버레이, 어둡게, 밝게, 컬러 닷지, 컬러 번, 하드 라이트, 소프트 라이트, 차이, 제외, 색조, 채도, 색상 및 광도.
참조 URL : https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image
'developer tip' 카테고리의 다른 글
NewtonSoft를 사용하여 한 줄로 JSON 개체 생성 (0) | 2021.01.10 |
---|---|
두 범위 함수 결과 연결 (0) | 2021.01.10 |
오류 : [ngModel : datefmt]`2015-05-29T19 : 06 : 16.693209Z`가 날짜가 될 것으로 예상 됨-Angular (0) | 2021.01.10 |
JavaScript 라이브러리를 최소화하고 압축하기 위해 무엇을 사용합니까? (0) | 2021.01.10 |
Ruby XML to JSON 변환기? (0) | 2021.01.10 |