이미지 hover 글자

이렇게 마우스를 오버했을 때 글자가 나타나는 효과를 부여할 것이다.

<div class="container">
    <img src="이미지 주소" alt="">
    <div class="overlay">
       <p class=""></p>
    </div>
</div>

소개를 써줄 p태그와 이미지를 넣을 img태그를 사용한다. 마우스를 오버했을 때 설명이 보여야 하므로 overlay라는 클래스로 설명을 감싸준다. overlay는 일단 안보이게 할 것이다.

css구조는 다음과 같다.

.container {
            width: 300px;
            height: 500px;
            position: relative;
	}

img {
            width: inherit;
            height: inherit;
            object-fit: cover;
	}

container에 position: relative를 주어야 설명이 이미지 위에 올 수가 있다. container에 넓이와 높이를 설정한 후 img에는 그 속성을 이어받도록 한다.

.overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgb(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.2s;
	}

overlay클래스에 무언가 좀 많다....
position: absolute로 설명을 이미지 위에 띄우고 위치를 설정한다. overlay도 넓이와 높이를 상속받도록한다.

display:flex를 준 이유는 글씨 때문이다. flex로 쉽게 글자를 가운데로 오게 할 수 있기 때문 center값을 줌으로써 이미지 중간에 설명이 오게 할 수 있다. 설명을 위로오게 하고 싶으면 justify-content를 flex-start로 변경하면 된다.

배경색을 rgb로 줌으로써 투명도를 설정할 수 있게 한다

rgb(red, green, blue, 투명도)

배경을 검정색으로 준뒤 0.5로 투명도를 조절하였다. 그리고 opacity로 overlay 자체를 투명하게 만들어버렸다. 일단 보이지 않게해야하니까

이제 hover했을 때의 경우만 설정해주면 된다.

.container:hover .overlay {
            opacity: 1;
 	}

container에 hover했을 때 overlay의 불투명도가 1이 되어서 완전 불투명해져 overlay에 설정된 배경색이 보이게 될 것이다.