사이트에서 상품이나 게시글의 썸네일이미지에 마우스를 올리면 이미지가 확대되는 효과를 사용하는 방법입니다.
transform속성을 사용하는데 transform(변형)은 HTML의 모양, 크기, 위치 등을 변경할 수 있습니다. transform의 메소드로는 translate(), rotate(), scale(), skew(), matrix() 가 있으며 이미지의 크기가 변경하는 메소드는 scale()로 이번 글에서 사용방법을 정리해보았습니다.
<style> CSS 부분
CSS를 먼저 확인하면 핵심은 transform:scale( ) 속성이다. 사용방법은 어렵지 않아서 금방 따라했지만 예상치 못한 결과가 확인하면서 overflow 속성과 object-fit 속성도 같이 정리했습니다.
<style>
.box{
overflow: hidden;
}
.box img{
object-fit:cover;
transform:scale(1.0);
transition: transform .5s;
}
.box img:hover{
transform:scale(1.3);
transition: transform .5s;
}
</style>
<body> 의 이미지 상자 부분
부트스트랩을 사용했습니다.
위 CSS부분에서는 아래 코드의 div의 box class와 img태그에 적용된 부분입니다.
<body>
<div class="container" style="display:inline-block;">
<div class="album mt-5"style="display:inline-block;" >
<div class="row">
<div class="col">
<div class="card shadow-sm" onclick="#"style='cursor:pointer;'>
<div class="box">
<img class="bd-placeholder-img card-img-top stretched-link imgbox" width="100%" height="225" src="./cost.png"></img>
</div>
<title class="fw-bold">이미지</title>
<div class="card-body">
<div class="justify-content-between align-items-center">
<p class="card-text hname">마우스 오버시 이미지 확대</p>
<small class="text-muted">2021-07-22</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.
.
.
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"></body>
</body>사용방법
1. overflow:hidden
2.object-fit:cover
3.transform:scale( )
4.transition:transform
1. Overflow : hidden
.box{
overflow: hidden;
}overflow 속성은 박스안에 있는 이미지가 사이즈가 커져서 요소 밖으로 나가는 경우, 요소를 벗어나는 부분에
대해서 정하는 것이며 visible, hidden, scroll, auto가 있으며, Overflow의 속성을 정하지 않으면 기본 속성인 visible이 적용되어 이미지가 상자를 벗어나게 됩니다. 즉 div안에 있는 img가 커져서 div의 밖으로 나가는 경우에는 div의 밖으로 나가는 img의 부분을 보이지 않게하는 것 입니다.
2. object-fit:cover
박스의 넓이와 높이에 맞게 비율이 유지되고 박스를 가득 채우는 속성을 줄 수 있다. fill, contain, cover, none, scale-down이 있다 object-fit:cover 속성을 사용하면 이미지의 비율을 유지하면서 확대할 수 있다.
.box img{
object-fit:cover;
transform:scale(1.0);
transition: transform .5s;
}
3. transform:scale();
transform속성은 요소를 변형시키는 속성이다. 다양한 변형방법이 있으며 아래에 링크를 확인하길 바랍니다.
transform:scale(1.3)은 X축과 Y축 모두 확장시키는 방법이고 1.3은 1.3배 확장되는 것을 의미한다.
.box img:hover{
transform:scale(1.3);
transition: transform .5s;
}CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회
www.codingfactory.net
4. transition: transform .5s;
transition 속성은 전환을 의미하고 에니메이션 효과의 시간을 제어하는 역할을 한다. transition 속성을 사용하지 않을 경우 이미지가 부드럽게 변형되지 않고 딱딱하게 변형되는 모습을 보이게 한다.
transition :transform .5s은 변형이 0.5초동안 transform(변형)한다는 것을 말한다.
.box img{
object-fit:cover;
transform:scale(1.0);
transition: transform .5s;
}
transform속성을 사용하면 2D뿐만 아니라 3D로 요소의 모영 크기 위치 등을 입체적으로 변형시킬 수 있다.
3D변형이 필요하다면 아래의 링크를 참고하여 진행하길 바랍니다.
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Web Programming > CSS' 카테고리의 다른 글
| CSS / 통통 튀는 애니메이션 (0) | 2021.09.07 |
|---|---|
| CSS / 문자가 두줄 이상되면 ...으로 처리하기 (0) | 2021.07.05 |
| CSS / object-fit 이미지 비율 유지하면서 채우기 (0) | 2021.06.23 |
