비디오 및 사진 갤러리 링크 뒤에 상자 만 반응

Question

어떻게

그래서 옆에 측면 2 개 사진하지만 첫 번째 박스 사진입니다 배경 상자와 그림 같은 두 장의 사진을 추가 비디오 : 파트 1 - 파트 2는 위의 비디오의 사진과 함께 표시 한 다음, 오른쪽으로보기 갤러리를 나타내는 텍스트가있는 다른 사진을 표시합니다. 그런 다음 모든 동영상에 대해이 반응을 반복하십시오.

나는 예쁜 버튼을 갖고 싶지만 Google 페이지 속도는 분명히 볼 수 없기 때문에 텍스트로만 머물렀다.

Answer 1

코드는 어디에 있습니까? 이것은 "나 웹 사이트 만들기"사이트가 아니라 도움말 사이트입니다. 어쨌든, 여기에 한 가지 방법입니다 :

.container { 
 
    box-sizing:border-box; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    width:100%; 
 
    height:100vh; 
 
} 
 

 
.image { 
 
    box-sizing: border-box; 
 
    min-width:100px; 
 
    min-height:65px; 
 
    margin-right: 20%; 
 
    content:'sadasdasd'; 
 
    
 
    background: url(http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg); 
 
    background-position: center center; 
 
    background-size: cover; 
 
    
 
} 
 

 
.image2 { 
 
    //position:absolute; 
 
    box-sizing: border-box; 
 
    min-width:100px; 
 
    min-height:65px; 
 
    margin-left: 0 20%; 
 
    content:'sadasdasd'; 
 
    background: url(http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/hubs/thebigpicture/the-big-picture-photography-competition-round-393/Fary-Afshar-xlarge.jpg); 
 
    background-position: center center; 
 
    background-size: cover; 
 
    
 
    
 
}

<div class="container"> 
 
    <div class="image"></div> 
 
    <div class="image2"></div> 
 
</div>