swiper fade 이미지 trasnform : scale 줘서 부드럽게 넘기기
본문
안녕하세요
swiper fade 효과 줘서 이미지가 자동으로 넘어가긴 하는데,
transform : scale (1.1)을 줘서 이미지가 확대 되었다가 넘어가게 하고 싶습니다.
제가 해봤는데 첫번째 이미지는 확대 되어서 잘 나오는데 첫 화면에 두세번째 이미지도 같이 딸려 나옵니다ㅜㅜ
css 확인 부탁드립니다ㅠㅠ
답변 3
코드가 없어서 한참 찾아 봤습니다. 이미지속에 있는 것 같네요.
가능하면 리얼 코드를 [code] 태크로 감싸서 올려 주시면
답변을 받기가 조금 더 빨라질 것 같습니다.
답변 감사합니다! 혹시 위ㅇ ㅔ올린 것 처럼 코드 올리면 되는 건가요? ㅠㅠ
<code>
<div id="visual">
<div class="contents swiper-container">
<ul class="visual-list swiper-wrapper">
<li class="visual01 swiper-slide">
<a href="#">
<div class="txt-box">
<span>Architecture & Culture</span>
<p class="main">인간의 한계를 뛰어넘다</p>
<p class="sub">지상 105층·지하 7층 552m 높이의 세계적인 마천루, I&T 트윈타워.<br>메이크건설의 첨단 공법이 세계의 스카이라인을 바꾸고 있습니다. </p>
</div>
</a>
</li>
<li class="visual02 swiper-slide">
<a href="#">
<div class="txt-box">
<span>Architecture & Culture</span>
<p class="main">건축에 문화를 더하다</p>
<p class="sub">한국 전통가옥 지붕의 곡선을 경기장에 접목한 세계 최고 수준의 대구스타디움.<br>메이크건설이 대한민국의 첨단 기술력을 전 세계에 과시하고 있습니다.</p>
</div>
</a>
</li>
<li class="visual03 swiper-slide">
<a href="#">
<div class="imgBox"></div>
<div class="txt-box">
<span>Architecture & Culture</span>
<p class="main">가치와 가치를 이어주다</p>
<p class="sub">길이 416k, 너비 22.4m 전국을 일일생활권으로 만든 국가 대동맥, 경부고속도로.<br>메이크건설은 지금 이 순간에도 대한민국의 가치를 높여가고 있습니다.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</code>
/* visual */
#visual {
overflow: hidden;
position: relative;
}
#visual .contents {
width: 100%;
height: 100vh;
}
#visual .contents .visual-list {
position: absolute;
width: 100%;
top: 0;
z-index: -99;
}
#visual .contents .visual-list .visual01 {
background-repeat: no-repeat;
transform: scale(1.1) rotate(0.01deg);
transition: all 4s ease 0s;
background-size: cover;
background-position: 50% center;
}
#visual .contents .visual-list .visual02 {
background-repeat: no-repeat;
transform: scale(1.1) rotate(0.01deg);
transition: all 4s ease 0s;
background-size: cover;
background-position: 50% center;
}
#visual .contents .visual-list .visual03 {
background-repeat: no-repeat;
transform: scale(1.1) rotate(0.01deg);
transition: all 4s ease 0s;
background-size: cover;
background-position: 50% center;
}
#visual .contents .visual-list li a {
display: block;
}
#visual .visual01 {
background: url(../images/mainVisual01.jpg);
}
#visual .visual02 {
background: url(../images/mainVisual02.jpg);
}
#visual .visual03 {
background: url(../images/mainVisual03.jpg);
}
#visual .contents .visual-list .txt-box {
position: absolute;
text-align: center;
transform: translate(-50%, -50%);
top: 50%;
width: 100%;
left: 50%;
color: #fff
}
#visual .contents .visual-list .txt-box span {
font-family: 'Roboto';
font-size: 27px;
text-shadow: 0px 1px 20px #000;
}
#visual .contents .visual-list .txt-box .main {
font-family: 'NanumSquare';
font-size: 120px;
font-weight: 600;
text-shadow: 0px 1px 20px #000;
}
#visual .contents .visual-list .txt-box .sub {
font-family: 'NanumSquare';
font-size: 25px;
text-shadow: 0px 1px 20px #000;
}
