마우스를 올렸을 때만 나타나도록 하는 효과 설정
[방법 1] display: none; → display: inline / block / inline-block;
[방법 2] opacity: 0; → opacity: 1;
[기본]
[사진에 마우스 올렸을 때]
(div 태그)
#gallery1.html
(ul-li 태그)
#gallery2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#gal {
background-color: black;
margin: 0 auto;
border: 5px solid black;
width: 670px;
height: 320px;
}
.small {
width: 180px;
height: 120px;
}
#gal>ul {
/*ul태그의 기호 없애기*/
list-style-type: none;
}
#gal>ul>li {
float: left;
padding: 10px;
position: relative;
}
/*.small:hover+.large,.large:hover : 반짝이는 현상을 방지 (large사진에 마우스가 있어도 됨)*/
.small:hover+.large,.large:hover {
z-index: 100;
/*사진이 겹치는 모서리에서 생성되지 않는 현상을 방지하기 위하여 사진이 나타났을 때 크기를 지정함*/
width: 360px;
height: 240px;
opacity: 1;
border: 1px solid black;
border-radius: 5px;
}
.large {
/*2초에 걸쳐서 나타나도록 하는 효과*/
transition: opacity 2s;
/*position: relative;로 부터 위에서 70px 왼쪽에서 100px*/
position: absolute;
top: 70px;
left: 100px;
opacity: 0;
}
</style>
</head>
<body>
<h1>사진 갤러리 만들기</h1>
<hr>
<div id='gal'>
<ul>
<li>
<img src="img/flower1.PNG" class="small">
<img src="img/flower1.PNG" class="large">
</li>
<li>
<img src="img/flower2.PNG" class="small">
<img src="img/flower2.PNG" class="large">
</li>
<li>
<img src="img/flower3.PNG" class="small">
<img src="img/flower3.PNG" class="large">
</li>
<li>
<img src="img/forest1.jpg" class="small">
<img src="img/forest1.jpg" class="large">
</li>
<li>
<img src="img/forest2.jpg" class="small">
<img src="img/forest2.jpg" class="large">
</li>
<li>
<img src="img/forest3.jpg" class="small">
<img src="img/forest3.jpg" class="large">
</li>
</ul>
</div>
</body>
</html>'CSS' 카테고리의 다른 글
| 문제 및 실습 (navi(2)-드롭다운 메뉴) (0) | 2020.10.15 |
|---|---|
| 문제 및 실습 (navi(1)-기본 메뉴) (0) | 2020.10.15 |
| Brackets 기능 추가 (Emmet) (0) | 2020.10.15 |
| 문제 및 실습 (폴라로이드) (0) | 2020.10.15 |
| 문제 및 실습 (div(3)-GO GREEN) (0) | 2020.10.15 |