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

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

아래와 같이 이미지 가운데에 타이틀을 띄우는 방법을 알아보겠습니다 여기에는 position: relative; 와 position: absolute; 가 사용됩니다 하나의 image가 relative 의 위치를 가지고 있고 들어갈 text가 absolute 를 가지면 image 안으로 들어가게 됩니다 여기서 이제 세로 가운데 정렬 효과를 주면 됩니다 // html 코드 <div class="project">             <div class="item">             <a href="#!" data-target="#modal1" data-toggle="modal">                         <img src="img/projects/project1.jpg" alt="Project">                         <span>제목입니다</span>              </a>              </div> </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; }