● 인라인 구조: span, strong 태그
● strong: 글자 굵기 강하게
[가운데 정렬]
부모에 가운데 정렬을 주어야함
display: flex;
justify-content: center;
align-items : center;
height : 100vh
>> 높이값을 지정해야 가운데 세로 정렬이 됨
이미지 마우스 오버시 opacity 값주기
ho1에 배경색 흰색 지정해주고 ho1에 hover명령시 이미지 투명도가 변경되도록 opacity값을 넣어준다.
hover 속도값을 넣어주기 위해 이미지에 transition 속도값 지정해준다.
[figcaption 영역 수정해주기]
figcaption 이미지 가운데 넣어주기
figcaption이 움직이기 위해서 ho1(부모)에 position:relative 기준점을 넣어주어야한다.
top,right,bottom,left= 0;
가상요소로 원 만들어주기
-가상요소
contetnt:"";
position:absolute;
-원 만들기
width:150px;
height: 150px;
background-color: #000;
bor
strong 글자 원 위로 올려주기
z-index: 20;
원 굴러가는 효과 주기
방법1)
figcaption에
left:500px
tranform: rotate(180deg)
하면 아래 이미지 처럼 된다.
가상요소에 hover명령 넣어주기
ho1에 마우스 오버했을 때 피그캡션이 움직여줘야한다.
transform: rotae(0deg);
left:0;
마우스오버시 원이 오른쪽에서 상자안으로 굴러가면서 들어오게 된다.
박스밖에 있는 원을 숨기기
ho1에 overflow:hidden 명령을 넣어주면 원이 상자안에서 굴러오는 효과를 줄 수 있음
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<figure class="ho1">
<img src="./images/img1.png" alt="음식이미지">
<figcaption>
<strong>mouse hover</strong>
</figcaption>
</figure>
<figure class="ho2"></figure>
</div>
</body>
</html>css
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
display: block;
}
body{
height: 100vh;
background: linear-gradient(120deg, #2c5346,#203a43,#0f2027);
}
#wrap{
/* 가운데 정렬 */
display: flex;
justify-content: center;
align-items: center;
/* 높이값을 지정해야 가운데 세로 정렬이 됨 */
height: 100vh;
}
#wrap .ho1{
width: 400px;
margin: 20px;
background-color: #fff;
position: relative;
overflow: hidden;
}
#wrap .ho1 img{
width: 100%;
transition: all 0.5s;
}
#wrap .ho1:hover img{
opacity: 0.1;
}
#wrap .ho1 figcaption{
/* figcaption 움직이기 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 500px;
margin: auto;
/* strong 가운데정렬 */
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* 원 굴러가는 효과주기 */
transform: rotate(180deg);
transition: all 0.8s;
}
#wrap .ho1:hover figcaption{
transform: rotate(0deg);
left: 0;
}
#wrap .ho1 figcaption::before{
content: "";
width: 150px;
height: 150px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
#wrap .ho1 figcaption strong{
z-index: 20;
/* strong 부분을 20레이어로 배치 */
/* z-index 항상 position과 함께쓴다. 부모가 position이 있기 때문에 가능 */
font-size: 18px;
text-transform: capitalize;
/* 첫번째 알파벳을 대문자로 변경해줌 */
}방법2)
top, right, bottom, left: 0;
transform: translateX(500px) rotate(180deg)
- 500px 이동 후 180도 회전해라
ho1마우스 오버했을 때 figcaption이 움직여 줘야한다.
transform: traslateX(0) rotate(0); 을 해서 원이 돌아가게 한다.
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 26 _ 마우스오버 효과④ (0) | 2023.06.13 |
|---|---|
| 비주얼 스튜디오 코드 25_ 탭 메뉴 ② (1) | 2023.06.12 |
| 비주얼 스튜디오 코드 23_ 마우스오버 효과② (0) | 2023.06.12 |
| 비주얼 스튜디오 코드 22_ 탭 메뉴 (0) | 2023.06.09 |
| 비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 (0) | 2023.06.09 |