반응형 디자인 2-4
디자인호텔스
결과
비디오 영상 밑 메뉴와 탭메뉴를 제작했다.
지난번에 버튼을 영상이 끝날때 share video , watch again 버튼이 나타나도록 했다.
영상 밑 재생과 음소거 버튼은 '폰트어썸'으로 가져왔고 클릭시 아이콘이 변경되게 하였다.
반응형으로 창을 줄이게 되면 줄바꿈이 일어나며 basis는 100%를 차지하게 된다.
비디오 태그를 호버하면 rgba 를 어둡게 한 배경이 transition이 되고 텍스트요소가 나타난다.
HTML
<section id="section2">
<div class="container">
<ul>
<li>
<div>
<div class="section2-title">
<h2>TRAVEL THE WORLD OF ORIGINAL EXPERIENCES</h2>
</div>
<div class="section2-content">
<p>
As time passes, what endures are the moments that moved your soul or altered your mind—the Original Experiences that stay with you long after you’ve returned home. Explore the world of Design Hotels™ Original Experiences, and begin dreaming up your next extraordinary trip.
</p>
</div>
</div>
</li>
<li>
<div>
<div class="section2-title">
<h2>#ORIGINALEXPERIENCES</h2>
</div>
<div class="section2-content">
<p>
How Original are you? Inspire a Community of likeminded travelers with images of unforgettable travel moments from your trip. Simply use the #OriginalExperiences hashtag to capture the enduring moments that have stayed with you.
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section id="section3">
<div class="container">
<h2 class="ir_so">Gallery</h2>
<div class="section3-tabMenu">
<ul>
<li><a href="javascript:" class="tabmenuBt addTap">all</a></li>
<li><a href="javascript:" class="tabmenuBt">beach</a></li>
<li><a href="javascript:" class="tabmenuBt">city</a></li>
<li><a href="javascript:" class="tabmenuBt">mountain</a></li>
<li><a href="javascript:" class="tabmenuBt">alterative</a></li>
<li><a href="javascript:" class="tabmenuBt">rejuvenate</a></li>
</ul>
</div>
<div class="section3-gallery-wrap">
<div class="section3-gallery">
<ul>
<li>
<div>
<a href="#" class="galleryBt">
<span class="section3-gallery-videoImage">
<video autoplay muted loop poster="img/videoBg01.jpg">
<source src="./video/galleryVideo01.mp4" type="video/mp4">
</video>
</span>
<span class="gallerycap"></span>
<span class="section3-gallery-title">
<span><strong>The Ride</strong></span>
<span><b>Istoria, Santorini, Greece</b></span>
<span><span><i class="exploreBt">Explore</i></span></span>
</span>
</a>
</div>
</li>
<li>
<div>
<a href="#" class="galleryBt">
<span class="section3-gallery-videoImage">
<video autoplay muted loop poster="img/videoBg02.jpg">
<source src="./video/galleryVideo02.mp4" type="video/mp4">
</video>
</span>
<span class="gallerycap"></span>
<span class="section3-gallery-title">
<span><strong>The Ride</strong></span>
<span><b>Istoria, Santorini, Greece</b></span>
<span><span><i class="exploreBt">Explore</i></span></span>
</span>
</a>
</div>
</li>SCSS
#section3{
width: 100%;
.container{
width: 100%;
.section3-tabMenu{
width: 100%; height: 52px;
background: #2c3437;
ul{
display: flex;
justify-content: center;
height: 52px;
align-items: center;
li{
a{
color: #aab6b1;
display: block;
padding: 16px 18px;
text-transform: uppercase;
&.addTap{
background: #121416;
color: #fff;
}
&:hover{
background: #121416;
}
}
}
}
}
.section3-gallery-wrap{
width: 100%;
position: relative;
.section3-gallery{
width: 100%;
background: #000;
display: none;
&:first-child{display: block;}
ul{
display: flex;
flex-wrap: wrap;
li{
flex-basis: 33.333%;
overflow: hidden;
div{
width: 100%;
a{
display: block;
position: relative;
width: 100%;
.section3-gallery-videoImage{
position: relative;
width: 100%;
display: block;
z-index: 1;
video{
width: 101%;
transform: scale(1);
transition: .3s;
display: block;
}
}
.gallerycap{
position: absolute;
display: block;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: 0.3s;
}
.section3-gallery-title{
position: absolute;
top: 32%;
left: 15%;
transition: .3s;
z-index: 3;
opacity: 0;
margin-top: 10px;
>span{
margin-top: 15px;
opacity: 0;
transition: .3s;
display: block;
padding-bottom: 40px;
strong{
color: #fff;
font-size: 2em;
}
b{
color: #fff;
font-size: .8em;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255,255,255,.3);
}
>span{
width: 100px;
height: 100px;
border: 1px solid $white-opcity;
border-radius: 50%;
display: block;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
.exploreBt{
color: #fff;
}
}
}
}
&:hover .gallerycap{ background: rgba(0,0,0,.7);}
&:hover .section3-gallery-title{opacity: 1; margin-top: 0;}
&:hover .section3-gallery-title>span:nth-child(1){
margin-top: 0;
opacity: 1;
transition: .3s;
}
&:hover .section3-gallery-title>span:nth-child(2){
margin-top: 0;
opacity: 1;
transition: .4s;
}
&:hover .section3-gallery-title>span:nth-child(3){
margin-top: 0;
opacity: 1;
transition: .5s;
}
&:hover .section3-gallery-videoImage video{transform: scale(1.2);}
}
}
}
}
}
