흔하게 볼 수 있는 부드러운~ 이미지롤오버 정보
흔하게 볼 수 있는 부드러운~ 이미지롤오버관련링크
첨부파일
본문
그누 팁은 아니지만
갤러리게시판 등 작업할때 응용할 수 있을것 같아서 올려봅니다.
요즘 흔하게 볼 수 있는 롤오버 이펙트 입니다.
CSS만으로 되어있어서 사용하기 좋네요.
미리보기 Url 있습니다~
style
body {
background-color:#eee
}
.wrap {
margin:50px auto 0 auto;
width:100%;
display:flex;
align-items:space-around;
max-width:1200px;
}
.tile {
width:380px;
height:380px;
margin:10px;
background-color:#99aeff;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
font-family:'Roboto';
}
.tile img {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
transition: all 0.4s ease-out;
}
.tile .text {
position:absolute;
padding:30px;
height:calc(100% - 60px);
height:calc(100% - 60px);
}
.tile h1 {
font-weight:300;
margin:0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2 {
font-weight:100;
margin:20px 0 0 0;
font-style:italic;
transform: translateX(200px);
}
.tile p {
font-weight:300;
margin:20px 0 0 0;
line-height: 25px;
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text {
opacity:0;
transition: all 0.6s ease-in-out;
}
.tile:hover {
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform:scale(1.05);
}
.tile:hover img {
opacity: 0.2;
}
.tile:hover .animate-text {
transform:translateX(0);
opacity:1;
}
.dots {
position:absolute;
bottom:20px;
right:30px;
margin: 0 auto;
width:30px;
height:30px;
color:currentColor;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
}
.dots span {
width: 5px;
height:5px;
background-color: currentColor;
border-radius: 50%;
display:block;
opacity:0;
transition: transform 0.4s ease-out, opacity 0.5s ease;
transform: translateY(30px);
}
.tile:hover span {
opacity:1;
transform:translateY(0px);
}
.dots span:nth-child(1) {
transition-delay: 0.05s;
}
.dots span:nth-child(2) {
transition-delay: 0.1s;
}
.dots span:nth-child(3) {
transition-delay: 0.15s;
}
@media (max-width: 1200px) {
.wrap {
flex-direction: column;
width:400px;
}
}
body
<div class="wrap">
<div class="tile">
<img src='images/s_01.jpg'/>
<div class="text">
<h1>Title</h1>
<h2 class="animate-text">content1</h2>
<p class="animate-text">content2</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="tile">
<img src='images/s_02.jpg'/>
<div class="text">
<h1>Title</h1>
<h2 class="animate-text">content1</h2>
<p class="animate-text">content2</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="tile">
<img src='images/s_03.jpg'/>
<div class="text">
<h1>Title</h1>
<h2 class="animate-text">content1</h2>
<p class="animate-text">content2</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
야무집니다~ 찰지네요!
멋진 갤러리가 나오길 기대해봅니다.
안나오면 직접만들?!
추천
5
5
댓글 20개
좋아요
저두요!
css만으로 되어있는게 마음에 드네요.
좋은 자료 감사합니다
좋은 자료 감사합니다
잘쓰셔요~ 감사합니다~
감사합니다!!..
감사합니다 ^^
감사합니다. 잘 사용하겠습니다.
감사합니다 잘쓰셔요~
감사합니다. 잘활용하겠습니다.
잘쓰세요 ^^
공유,감사합니다...
감사합니다~
CSS
!!
잘 쓰겠습니다.
잘쓰셔요~
gg
^^
좋은 정보 감사합니다.
감사합니다!