노력이 좋아서
<step18>'css_hover,position_실습'
zoaseo
2022. 4. 13. 16:14
1) hover_ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
body {
background-color: #333;
color: #fff;
}
.clearboth::after {
content: "";
display: block;
clear: both;
}
img {
vertical-align: top;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
h2 {
padding: 30px 0;
font-size: 42px;
}
h3 {
font-size: 36px;
}
p {
font-size: 22px;
}
li {
list-style: none;
float: left;
width: 48%;
position: relative;
}
li img { width: 100%;}
li:nth-child(1) {
margin-right: 4%;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.text {
position: absolute;
top: 100px;
text-align: center;
width: 100%;
transition: 0.5s;
}
#hover1 .text p {
opacity: 0;
transition: 0.5s;
}
#hover1 li:hover p {
opacity: 1;
}
#hover2 li:hover p {
opacity: 1;
}
#hover1 li:hover .text {
top: 160px;
}
#hover1 li::after {
content: "";
display: block;
position: absolute;
left: 30px;
top: 30px;
right: 30px;
bottom: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
transition: 0.5s;
}
#hover1 li:hover::after {
transform: scale(1,1);
}
#hover1 li::before {
content: "";
display: block;
position: absolute;
left: 30px;
top: 30px;
right: 30px;
bottom: 30px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
transform: scale(1,0);
transition: 0.5s;
}
#hover1 li:hover::before {
transform: scale(1,1);
}
#hover2 .bg {
background: 0;
transition: 0.5s;
}
#hover2 li::before {
content: "";
display: block;
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
border: 1px solid #fff;
transform: scale(1.3,1.3);
transition: 0.5s;
z-index: 2; /* position과 같이 써야한다! */
}
#hover2 li {
overflow: hidden;
}
#hover2 li:hover::before {
transform: scale(1,1);
}
#hover2 li:hover .bg {
background-color: rgba(0, 0, 0, 0.5);
}
#hover2 img {
transform: scale(1.3,1.3);
transition: 0.5s;
}
#hover2 li:hover img {
transform: scale(1,1);
}
#hover3 h3 {
padding-top: 20px;
transition: 0.5s;
}
#hover3 p {
padding-top: 30px;
transition: 0.5s;
}
#hover3 li::before, #hover3 li::after {
content: "";
display: block;
width: 90%;
height: 1px;
background-color: #fff;
position: absolute;
top: 50%;
left: 5%;
transition: 0.5s;
z-index: 2;
}
#hover3 .bg {
background: 0;
transition: 0.5s;
}
#hover3 li:hover .bg {
background-color: rgba(0, 0, 0, 0.5);
}
#hover3 li:hover::before {
transform: rotate(45deg);
}
#hover3 li:hover::after {
transform: rotate(-45deg);
}
#hover3 li:hover h3 {
padding-top: 30px;
}
#hover3 li:hover p {
padding-top: 10px;
}
#hover4 .bg {
transition: 0.5s;
background-color: rgba(0, 0, 0, 0);
}
#hover4 .text {
text-align: left;
top: 80px;
left: 40px;
}
#hover4 li::after {
content: "";
display: block;
position: absolute;
width: 0;
left: 5%;
top: 126px;
height: 5px;
background-color: #fff;
transition: 0.5s;
}
#hover4 p {
position: absolute;
width: 90%;
top: 50px;
left: 100%;
transition: 0.5s;
}
#hover4 li:hover::after {
width: 90%;
}
#hover4 li:hover .bg {
background-color: rgba(0, 0, 0, 0.5);
}
#hover4 li:hover p {
left: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="hover1">
<h2>hover01</h2>
<ul class="clearboth">
<li>
<img src="./images (6)/1.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
<li>
<img src="./images (6)/2.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
</ul>
</div>
<div id="hover2">
<h2>hover02</h2>
<ul class="clearboth">
<li>
<img src="./images (6)/3.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<!-- <p>green web</p> -->
</div>
</li>
<li>
<img src="./images (6)/4.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<!-- <p>green web</p> -->
</div>
</li>
</ul>
</div>
<div id="hover3">
<h2>hover03</h2>
<ul class="clearboth">
<li>
<img src="./images (6)/2.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
<li>
<img src="./images (6)/3.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
</ul>
</div>
<div id="hover4">
<h2>hover04</h2>
<ul class="clearboth">
<li>
<img src="./images (6)/2.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
<li>
<img src="./images (6)/3.jpg" alt="">
<div class="bg"></div>
<div class="text">
<h3>hover effect</h3>
<p>green web</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body {
/* width: 1500px;
max-width: 100%;
margin: 0 auto; */
color: #2d2d2d;
font-size: 14px;
line-height: 1.6;
}
#wrap {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.clearboth::after {
content: "";
display: block;
clear: both;
}
#header {
padding: 10px;
}
.inner_con ul {
padding: 8px;
}
.inner_con li {
float: left;
}
.gnb {
border-bottom: 1px solid #ccc;
margin-bottom: 12px;
}
.gnb ul {
float: right;
}
.gnb li {
float: left;
padding: 0 8px;
}
.topnav h1 {
float: left;
width: 30%;
}
.topnav ul {
float: left;
padding-top: 20px;
width: 60%;
}
.topnav li {
text-align: center;
padding: 0 15px;
}
.topnav li:nth-child(1) {
padding-left: 60px;
}
.topnav input {
float: right;
margin-top: 20px;
width: 10%;
}
#visual {
background-color: #ffcc00;
}
#visual .maintit {
text-align: center;
color: #fff;
font-size: 18px;
padding-top: 40px;
width: 100%;
}
#security .maintit {
text-align: center;
padding-top: 40px;
}
#security .maintit h2 {
font-size: 28px;
color: #00a2ff;
}
#security .maintit p {
font-size: 18px;
}
#security li {
float: left;
width: 27%;
margin: 3%;
padding: 10px;
text-align: center;
}
#security p {
padding-bottom: 30px;
}
#security img {
width: 100%;
padding-bottom: 20px;
}
#security a {
border: 1px solid #0084cb;
padding: 7px 25px;
}
#security li:hover a {
color: #fff;
background-color: #0084cb;
}
#blog .text {
padding: 10px;
}
#blog {
background-color: #efefef;
margin-bottom: 10px;
}
#blog .maintit {
text-align: center;
font-size: 20px;
padding: 20px 0;
}
#blog li {
float: left;
width: 23%;
margin: 1%;
background-color: #fff;
}
#blog img {
width: 100%;
}
.img {
position: relative;
}
.img a {
position: absolute;
/* transform: scale(0); */
transition: 0.5s;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 3px 27px;
opacity: 0;
}
#blog .img {
transition: 0.5s;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
/* background: rgba(0, 0, 0, 0.5); */
left: 0;
top: 0;
transition: 0.5s;
}
#blog li:hover .bg {
background-color: rgba(0, 0, 0, 0.5);
}
#blog li:hover a {
left: 50%; /* center로 보내기!! */
top: 50%; /* center로 보내기!! */
transform: translate(-50%,-50%); /* center로 보내기!! */
color: #fff;
border: 1px solid #fff;
padding: 3px 27px;
opacity: 1;
}
#blog a:hover {
background: #fff;
color: red;
}
#blog ul {
padding-bottom: 20px;
}
.dark {
position: absolute;
width: 100%;
height: 100%;
top: 200%;
left: 50%;
transform: translate(-50%,-50%);
transition: 0.5s;
}
.movediv {
width: 100%;
}
#quickmenu li {
height: 200px;
float: left;
width: 23%;
margin: 1%;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
padding: 20px 30px;
}
#quickmenu li h3 {
font-size: 20px;
padding-bottom: 10px;
}
#quickmenu li p {
font-size: 14px;
}
#quickmenu li:nth-child(1) {
background-color: #008ed6;
}
#quickmenu li:nth-child(1):hover .dark {
background-color: #0072ab;
top: 50%;
padding-top: 70px;
}
#quickmenu li:nth-child(1):hover .dark > a {
border: 1px solid #fff;
padding: 8px 35px;
}
#quickmenu li:nth-child(2) {
background-color: #17cbc8;
}
#quickmenu li:nth-child(2):hover .dark {
background-color: #14a3a1;
top: 50%;
padding-top: 70px;
}
#quickmenu li:nth-child(2):hover .dark > a {
border: 1px solid #fff;
padding: 8px 35px;
}
#quickmenu li:nth-child(3) {
background-color: #2cadef;
}
#quickmenu li:nth-child(3):hover .dark {
background-color: #238abf;
top: 50%;
padding-top: 70px;
}
#quickmenu li:nth-child(3):hover .dark > a {
border: 1px solid #fff;
padding: 8px 35px;
}
#quickmenu li:nth-child(4) {
background-color: #4159d7;
}
#quickmenu li:nth-child(4):hover .dark {
background-color: #3548a9;
top: 50%;
padding-top: 70px;
}
#quickmenu li:nth-child(4):hover .dark > a {
border: 1px solid #fff;
padding: 8px 35px;
}
#footer {
padding: 50px 0;
}
#footer_menu ul {
float: left;
}
/* #footer_menu li:not(:last-child) {
border-right: 1px solid #ccc;
} */
#footer_menu li {
padding: 0 10px;
}
#footer_menu a {
float: right;
border-left: 1px solid #ccc;
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
#footer_copy {
padding: 20px 0;
}
#footer_copy h1 {
float: left;
/* width: 3%; */
}
#footer_copy address {
width: 70%;
display: inline-block;
text-align: center;
}
#footer_copy ul {
float: right;
/* width: 18%; */
}
#footer_copy li {
float: left;
padding: 8px;
}
#footer_menu div {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<!-- 상단영역 -->
<div id="header">
<div class="gnb">
<div class="inner_con clearboth">
<ul>
<li><a href="#"><img src="images/ico_s_facebook.gif" alt=""></a></li>
<li><a href="#"><img src="images/ico_s_twitter.gif" alt=""></a></li>
<li><a href="#"><img src="images/ico_s_youtube.gif" alt=""></a></li>
<li><a href="#">사이트맵</a></li>
<li><a href="#">한국어</a></li>
</ul>
</div>
</div>
<div class="inner_con topnav clearboth">
<h1><img src="images/logo.jpg" alt=""></h1>
<ul>
<li><a href="#">기업소개</a></li>
<li><a href="#">솔루션</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">PR</a></li>
<li><a href="#">BLOG</a></li>
</ul>
<input type="text" class="topsearch">
</div>
</div>
<!-- 상단영역 /-->
<!-- 컨텐츠영역 -->
<div id="contents">
<!-- 비주얼부분 -->
<div id="visual">
<div class="inner_con">
<div class="maintit">
<h2>Monthly Security Peport</h2>
<p>본 보고서는 이글루시큐리티에서 보안 매거진으로 고객부터 it보안 종사자까지 더 많은 분들과 보안 이슈를 공유
함으로써 안전한 보안환경을 만들기 위해 제작되었습니다.</p>
</div>
<div>
<img src="images/visual.gif" alt="">
</div>
</div>
</div>
<!-- 비주얼부분 /-->
<!-- Security부분 -->
<div id="security" class="inner_con">
<div class="maintit">
<h2>국내 no.1 보안관리 전문기업, 이글루시큐리티는 글로벌대표 보안기업입니다.</h2>
<p>이글루시큐리티는 점차 지능적으로 변화하는 보안위협에 선제적으로 대응하기위해 혁신적인 솔루션과 서비스를 고객에게 제공하고 있습니다.</p>
</div>
<ul class="clearboth">
<li>
<img src="images/company_01.jpg" alt="">
<h3>솔루션</h3>
<p>차세대 종합 보안관리 플랫폼</p>
<a href="#" class="morebtn1">more</a>
</li>
<li>
<img src="images/company_02.jpg" alt="">
<h3>보안관제</h3>
<p>24시간 365일 종합보안관제 서비스</p>
<a href="#" class="morebtn1">more</a>
</li>
<li>
<img src="images/company_03.jpg" alt="">
<h3>보안관제</h3>
<p>차세대 종합 보안관리 플랫폼</p>
<a href="#" class="morebtn1">more</a>
</li>
</ul>
</div>
<!-- Security부분 /-->
<!-- blog부분 -->
<div id="blog">
<div class="inner_con">
<div class="maintit">
<h2>BLOG POST</h2>
<p>이글루시큐리티의 다양한 소식과 유익한 정보가 담긴 블러그를 소개합니다.</p>
</div>
<ul class="clearboth">
<li>
<div class="img">
<img src="images/img01.gif" alt="">
<a href="#" class="morebtn2">more</a>
<div class="bg"></div>
</div>
<div class="text">
<h3>IoT보안위협에 따른 대응...</h3>
<p>IoT보안위협에 따른 대응방안Internet of Things= Internet of Threats(사물인터넷인가?위...)</p>
<span>2017.06.07</span>
</div>
</li>
<li>
<div class="img">
<img src="images/img02.gif" alt="">
<a href="#" class="morebtn2">more</a>
<div class="bg"></div>
</div>
<div class="text">
<h3>IoT보안위협에 따른 대응...</h3>
<p>IoT보안위협에 따른 대응방안Internet of Things= Internet of Threats(사물인터넷인가?위...)</p>
<span>2017.06.07</span>
</div>
</li>
<li>
<div class="img">
<img src="images/img03.gif" alt="">
<a href="#" class="morebtn2">more</a>
<div class="bg"></div>
</div>
<div class="text">
<h3>IoT보안위협에 따른 대응...</h3>
<p>IoT보안위협에 따른 대응방안Internet of Things= Internet of Threats(사물인터넷인가?위...)</p>
<span>2017.06.07</span>
</div>
</li>
<li>
<div class="img">
<img src="images/img04.gif" alt="">
<a href="#" class="morebtn2">more</a>
<div class="bg"></div>
</div>
<div class="text">
<h3>IoT보안위협에 따른 대응...</h3>
<p>IoT보안위협에 따른 대응방안Internet of Things= Internet of Threats(사물인터넷인가?위...)</p>
<span>2017.06.07</span>
</div>
</li>
</ul>
</div>
</div>
<!-- blog부분 /-->
<!-- quickmenu부분 -->
<div class="inner_con" id="quickmenu">
<ul class="clearboth">
<li>
<div class="movediv">
<div>
<h3>Business Map</h3>
<img src="images/foo_01.jpg" alt="">
<p>이클루시큐리티를 만나는 가장 빠른 방법</p>
</div>
<div class="dark">
<h3>Business Map</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>다운로드</h3>
<img src="images/foo_02.jpg" alt="">
<p>제품관련 파일을 다운로드 받으세요</p>
</div>
<div class="dark">
<h3>다운로드</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>인재채용</h3>
<img src="images/foo_03.jpg" alt="">
<p>정직과 신뢰를 바탕으로 창의적인 글로벌인재를 기다립니다.</p>
</div>
<div class="dark">
<h3>인재채용</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>IGLOO News</h3>
<img src="images/foo_04.jpg" alt="">
<p>이글루시큐리티의 최신 보안뉴스와 정보를 확인하세요.</p>
</div>
<div class="dark">
<h3>IGLOO News</h3>
<a href="#">more</a>
</div>
</div>
</li>
</ul>
</div>
<!-- quickmenu부분 /-->
</div>
<!-- 컨텐츠영역 /-->
<!-- 하단영역 -->
<div id="footer">
<div id="footer_menu">
<div class="inner_con clearboth">
<ul>
<li><a href="#">채용정보</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
<a href="#">TOP</a>
</div>
</div>
<div id="footer_copy" class="inner_con clearboth">
<h1><img src="images/f_logo.gif" alt=""></h1>
<address>서울특별시 송파구 정의로8길 7 (문정동 640-3) 한스빌딩 6층 IGLOO SECURITY TEL : 02-3452-8814 FAX : 02-3452-8815 COPYRIGHT 2017 IGLOO SECURITY. ALL RIGHTS RESERVED.</address>
<ul>
<li><a href="#"><img src="images/ico_s_facebook.gif" alt=""></a></li>
<li><a href="#"><img src="images/ico_s_twitter.gif" alt=""></a></li>
<li><a href="#"><img src="images/ico_s_youtube.gif" alt=""></a></li>
</ul>
</div>
</div>
<!-- 하단영역 /-->
</div>
</body>
</html>
3) quickmenu 부분 ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
#wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
#quickmenu li {
float: left;
width: 24.25%;
text-align: center;
color: #fff;
height: 200px;
overflow: hidden;
position: relative;
}
#quickmenu li:not(:first-child) {
margin-left: 1%;
}
#quickmenu li:nth-child(1) {
background-color: #008ed6;
}
#quickmenu li:nth-child(2) {
background-color: #17cbc8;
}
#quickmenu li:nth-child(3) {
background-color: #2cadef;
}
#quickmenu li:nth-child(4) {
background-color: #4159d7;
}
#quickmenu li .movediv {
height: 400px;
position: absolute;
top: 0;
transition: 0.5s;
}
#quickmenu li:hover .movediv {
top: -200px;
}
#quickmenu li .movediv div {
height: 200px;
padding: 20px 30px;
}
#quickmenu li .movediv div:nth-child(2) {
background-color: rgba(0, 0, 0, 0.2);
padding-top: 60px;
}
#quickmenu li .movediv div:nth-child(2) a {
border: 1px solid #fff;
line-height: 30px;
width: 120px;
display: inline-block;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<!-- quickmenu부분 -->
<div class="inner_con" id="quickmenu">
<ul class="clearboth">
<li>
<div class="movediv">
<div>
<h3>Business Map</h3>
<img src="images/foo_01.jpg" alt="">
<p>이클루시큐리티를 만나는 가장 빠른 방법</p>
</div>
<div class="dark">
<h3>Business Map</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>다운로드</h3>
<img src="images/foo_02.jpg" alt="">
<p>제품관련 파일을 다운로드 받으세요</p>
</div>
<div class="dark">
<h3>다운로드</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>인재채용</h3>
<img src="images/foo_03.jpg" alt="">
<p>정직과 신뢰를 바탕으로 창의적인 글로벌인재를 기다립니다.</p>
</div>
<div class="dark">
<h3>인재채용</h3>
<a href="#">more</a>
</div>
</div>
</li>
<li>
<div class="movediv">
<div>
<h3>IGLOO News</h3>
<img src="images/foo_04.jpg" alt="">
<p>이글루시큐리티의 최신 보안뉴스와 정보를 확인하세요.</p>
</div>
<div class="dark">
<h3>IGLOO News</h3>
<a href="#">more</a>
</div>
</div>
</li>
</ul>
</div>
<!-- quickmenu부분 /-->
</body>
</html>4)