CSS와 HTML을 사용하여 이미지 오버레이를 만드는 방법은 무엇입니까?

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);
}

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

라이브 데모는 다음과 같습니다. http://jsfiddle.net/6Mt3Q/

추가 스타일로 오버레이 사용자 정의

오버레이의 모양을 향상하려면 다음과 같이 추가 스타일을 추가할 수 있습니다. 팔로우:

<code class="css">.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;
}</code>

<code class="html"><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></code>

위 내용은 CSS와 HTML을 사용하여 이미지 오버레이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!