CSS 마우스 호버 이미지 줌 소스
codepen에 있는 오픈소스로 마우스 오버시 줌 처리되는 소스입니다.
출처 : https://codepen.io/Gregoofolio/pen/jWYZLj?q=zoom%20hover&order=popularity&depth=everything&show_forks=false
html
<div class="card">
<div class="img-holder">
<div class="overlay"><i class="fa fa-search"></i></div>
<img src="http://grzegorzkyc.pl/www/jagiellonian/assets/img/card-5-img.jpg" alt="" />
</div>
<div class="content-holder">
<p class="category">Lifestyle</p>
<div class="separator">
<span class="separator-sub"></span>
</div>
<h1>Are we still questioning Jadwiga Andagawenska's beauty?</h1>
<h2>Queen decided to have plastic surgery.</h2>
<p class="author"><span>by</span> Wladyslaw II Jagiello</p>
</div>
</div>
css
*{
margin:0;
padding:0;
}
body{
background: #C6CBD1;
}
.card{
background: #fff;
display: block;
margin:50px auto;
width:320px;
cursor: pointer;
border-right: 2px solid #A0B0BA;
border-bottom: 2px solid #264C67;
border-radius:5px;
&:hover{
img{
transform:scale(1.1);
opacity: 0.5;
}
.content-holder{
padding-left: 25px;
}
.img-holder .overlay{
opacity:1;
}
}
.img-holder{
overflow: hidden;
background: #000;
position: relative;
img{
width:100%;
display:block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.overlay{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
opacity:0;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease-in-out;
i{
font-size: 3em;
color:#fff;
}
}
}
.content-holder{
padding:20px;
transition: padding 0.3s ease;
.category{
font-family: 'Alegreya Sans', sans-serif;
text-transform: uppercase;
font-weight: 700;
color:#2A516A;
margin-bottom: 10px;
}
.separator{
width:100%;
height: 2px;
background: #DCE2EE;
margin-bottom: 10px;
.separator-sub{
width:15%;
height: 100%;
background: #214662;
display: block
}
}
h1{
font-family: 'Alegreya Sans', sans-serif;
font-size: 1.1em;
font-weight: 600;
color: #1D1D1D;
}
h2{
color: grey;
font-family: 'Alegreya Sans', sans-serif;
font-size: 0.9em;
margin-bottom: 5px;
}
.author{
font-family: 'Alegreya Sans', sans-serif;
color: #1D1D1D;
font-weight: 600;
font-style: italic;
span{
color: grey;
font-weight: 400;
}
}
}
}
댓글
댓글 쓰기