728x90
이미지 유형_02
마우스를 가져가다 대면 반응을 하는 이미지 유형 사이트를 만들어보겠습니다.
HTML 코드
간단하게 이미지 유형을 만들어보기 위해 하단과 같이 구조를 만들어 줍니다.
이때 이미지에 마우스를 가져다 대면 이미지가 틀에 맞춰 확대되는 효과를 주기위해 img태그를 사용해 이미지를 불러옵니다!
<body class="gmark">
<div class="section container">
<h2>강아지의 모든 모습!</h2>
<p>세상에서 가장 귀여운 강아지의 모든 모습을 상상하고 세세하게 지켜만 보세요!!</p>
<article class="card_cont">
<div class="card img1">
<img src="img/bg02_01.jpg" alt="">
<div class="text_cont left">
<h3>NAME : BULDOG</h3>
<p style="text-decoration:underline">자세히 보기</p>
</div>
</div>
<div class="card img2">
<img src="img/bg02_02.jpg" alt="">
<div class="text_cont center">
<h3>NAME : MALTIZ</h3>
<p>자세히 보기</p>
</div>
</div>
<div class="card img3">
<img src="img/bg02_03.jpg" alt="">
<div class="text_cont right">
<h3>NAME : WELSH CORGI</h3>
<p>자세히 보기</p>
</div>
</div>
</article>
</div>
</body>
CSS 코드
css에서 마우스를 가져다 댈때 이미지가 확대되고 마우스를 떼면 다시 이미지가 원래대로 돌아올 수 있도록 만들건데, 이와 같은 효과를 구현하기 위해서 not(:hover) 과 :hover를 적절히 섞어 css를 완성합니다.
기본적으로 이미지 하단의 설명은 숨기기 위해 bottom을 -100px로 설정합니다.
.text_cont {
position: absolute;
bottom: -100px; /* 밑으로 보내기 */
left: 0;
text-align: center;
width: 100%;
height: 100px;
background-color: rgba(153, 153, 153, 0.465);
box-sizing: border-box;
padding: 20px;
backdrop-filter: blur(15px);
color: #fff;
}
bottom을 -100px 주게되면 밖으로 빠져나오는데 빠져나온 부분은 숨길 수 있도록 overflow:hidden을 설정해 해당 부분은 숨겨줍니다.
.card {
width: 373px;
height: 520px;
background-color: #ededed;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden; /* 여기 꼭 필수 !! */
}
이미지 확대되는 효과
위의 기본 세팅을 마치고 나서 눌렀을때(hover) 마우스가 해당 요소에서 벗어날때(not(:hover) 효과를 각각 하단과 같이 줍니다.
.card:hover .text_cont {
bottom: 0px; /* text_cont 위치를 원래대로 */
transition: all 0.25s ease-out; /* 해당 변화 시간은 0.25초 */
}
.card:hover.card img{
transform: scale(1.05); /* 확대효과 1은 원본 */
transition: all 0.25s ease-out;
}
.card:not(:hover).card img,
.card:not(:hover) .text_cont {
transition: all 0.25s ease-out; /* 마우스를 떼어낼때 0.25초의 변화 */
}
전체 CSS 코드
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: 'GmarketSans';
font-weight: normal;
/* Reset */
* {
margin: 0;
padding: 0;
a {
text-decoration: none;
color: #000;
img {
width: 100%;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
/* common(공통) */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
.section {
padding: 120px 0;
/*위 아래 */
.section>h2 {
/* ">" 이걸로 section 안에 있는 h2선택 */
font-size: 50px;
line-height: 1;
/* 1이라고 적으면 auto랑 똑같음 */
text-align: center;
margin-bottom: 20px;
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
/* card */
.card_cont {
display: flex;
justify-content: space-between;
.card {
width: 373px;
height: 520px;
background-color: #ededed;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
.text_cont {
position: absolute;
bottom: -100px;
left: 0;
text-align: center;
width: 100%;
height: 100px;
background-color: rgba(153, 153, 153, 0.465);
box-sizing: border-box;
padding: 20px;
backdrop-filter: blur(15px);
color: #fff;
.card:hover .text_cont {
bottom: 0px;
transition: all 0.25s ease-out;
.card:hover.card img{
transform: scale(1.05);
transition: all 0.25s ease-out;
.card:not(:hover).card img,
.card:not(:hover) .text_cont {
transition: all 0.25s ease-out;
.text_cont.left {
background-color: #2b1b6472;
.text_cont.center {
background-color: #d19e286f;
.text_cont.right {
background-color: #db581b6c;
.text_cont h3 {
font-size: 24px;
.text_cont p {
margin-top: 10px;
font-size: 16px;
.card img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
결과
728x90
반응형
'SITE 제작' 카테고리의 다른 글
| 텍스트 유형 01 만들어보자 얄루! (6) | 2022.08.30 |
|---|---|
| 이미지 유형 03 사이트 만들기! (13) | 2022.08.21 |
| 이미지 유형_01 만들어보기~~ (2) | 2022.08.17 |
| 사이트 만들기03 (11) | 2022.08.10 |
| 카드 유형 02 만들어보기! (11) | 2022.08.09 |
댓글