[CSS] - relative absolute 이용하여 이미지 가운데에 타이틀 띄우기

CSS

Riucc 2018. 10. 21. 20:37

○ relative absolute 이용하여 이미지 가운데에 타이틀 띄우기

아래와 같이 이미지 가운데에 타이틀을 띄우는 방법을 알아보겠습니다

여기에는 position: relative; 와 position: absolute; 가 사용됩니다

하나의 image가 relative 의 위치를 가지고 있고

들어갈 text가 absolute 를 가지면 image 안으로 들어가게 됩니다

여기서 이제 세로 가운데 정렬 효과를 주면 됩니다

// html 코드

<span>제목입니다</span>

</a>

</div>

// css 코드

.project .item {

position: relative;

}

/* top, left, transform 이용해서 세로 가운데 정렬 */

/* hover 효과 주기 위해서 opacity: 0 으로 안보이게 한 후 1로 다시 보이게 한다 */

.project .item span {

position: absolute;

top: 50%;

left: 50%;

transform:translate(-50%,-50%);

color: black;

font-size: 30px;

opacity: 0;

font-weight: bold;

transition: all 0.5s ease;

}

.project .item:hover span {

opacity: 1;

}