CSS의 transition을 이용해서 마우스를 이미지에 hover 할 때 원형 효과 주는 것을 연습해 보았다.
우선 html에서 배경을 넣을 영역과 텍스트를 넣을 영역을 만들어준다.
텍스트 영역 안에는 큰글씨와 작은 글씨로 나눌 거라 h1태그와 span태그를 사용했다.
[html]
<body>
<div class="circle">
<div class="textBox">
<h1>Tree</h1>
<span>by Gayouni</span>
</div>
</div>
</body>html은 여기서 끝! 간단하게 만들어볼거라 원 하나만 만들었다.
다음 css에서 배경을 원형으로 바꿔줄 것이다.
[css]
div.circle {
width: 200px; height: 200px; border-radius: 50%;
margin: 20px 30px; position: relative;
box-shadow: inset 0 0 0 16px rgba(207, 207, 207, 0.6);
transition: all 1s ease-in-out;
}rgba를 이용해서 box-shadow를 투명하게 만들어준다.
배경에 transition을 설정해준 뒤
아직 중구난방인 텍스트를 정렬하러가보자.
.circle .textBox{
width: 100%; height:100%; border-radius: 50%;
text-align: center;
color: black;
position:absolute; left: 0; top:0;
padding: 60px 20px;
box-sizing: border-box;
opacity: 0;
transform: scale(0);
transition: all 1s ease-in-out;
}text-align을 사용해서 텍스트를 가운데로 정렬시키고
부모에는 position:relative; 를 먼저 준 다음 자신은 absolute를 줘서 배경과 텍스트 영역이 아예 겹치게 만들었다.
패딩은 안에 더 이쁘게 정렬되도록 준 것
마찬가지로 트렌지션을 미리 주고
opacitiy와 trasnform:scale을 각각 0으로 준다.
나중에 hover상태일 때 opacitiy는 점점 나타나도록 scale은 점점 커지도록 하는 효과이다.
transition에 ease-in-out 설정을 준 이유는 지속시간이 1초라 linear나 다른 속성들과 눈에 띄게 큰 차이는 없지만 좀 더 스무스한 느낌이 들기 때문이다.
안에 있는 h1과 span 태그 안에 있는 텍스트도 개별 설정해준다.
h1 {font-size: 20px; letter-spacing: 2px;}
span {color:red;}
이제 :hover 효과를 줄 것이다.
먼저 배경 영역에 hover를 먼저 설정해서 텍스트가 아닌 배경색에 transition 효과를 준다.
div.circle:hover {
box-shadow:
inset 0 0 0 100px rgba(148, 110, 110, 0.6);
}box-shadow를 inset으로 주고 배경색 또한 투명하게 줘서 마우스를 가져다 대면 자연스럽게 안쪽으로 그림자가 진다.
다음은 텍스트를 반대로 나타나게 해야 한다.
전에 줬던 투명도와 크기를 다시 원래대로 돌려놓으면 된다.
div.circle:hover .textBox {opacity: 1;transform: scale(1);}:hover는 textBox가 circle 영역에 꽉 차 있기 때문에 circle에 호버를 하면 텍스트가 효과가 나타나게 해야 한다.
실행화면
See the Pen JjdzZbM by gayuon (@gayuon) on CodePen.
'web > HTML&CSS' 카테고리의 다른 글
| html emmet(에멧) 문법 (0) | 2024.09.11 |
|---|---|
| [html]meta 태그 (0) | 2021.11.09 |
| HTML 하이퍼링크 (0) | 2020.03.30 |
| HTML에 구글 웹 폰트/웹 아이콘 사용하기. (0) | 2020.03.27 |
| [CSS]transform(3D변형)효과 주기 (0) | 2020.03.27 |
댓글