console
var modal = document.getElementById('myModal');
var modalImgCont = document.getElementById("myImgContent");
function closeModal(){
var modalImg = document.getElementById("myImg");
modalImgCont.removeChild(modalImg);
modal.style.display = "none";
}
function openModal(that){
var modalImg = document.createElement("img");
modalImg.id = "myImg";
modalImg.src = that.src;
modalImg.alt = that.alt;
modalImgCont.appendChild(modalImg);
modal.style.display = "block";
}
<div class="image-container">
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516181134241&di=1ff4f36c77be26c2c21fa66e5b4f4612&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D877014418%2C2613599603%26fm%3D214%26gp%3D0.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">富士山</div>
<div class="img-description" title="查看更多">富士山被日本人民誉为“圣岳”，是日本民族的象征。作为日本的国家象征之一，在全球享有盛誉。它也经常被称作“芙蓉峰”或“富岳”以及“不二的高岭</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516181454321&di=67f9acef12d06ff5b1573c260d6f975c&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151031%2Fmp38937645_1446262908103_6.jpeg" alt="sss" />
<div class="img-footer">
<div class="img-name">清水寺</div>
<div class="img-description" title="查看更多">清水寺位于京都东部音羽山的山腰，始建于778年，是京都最古老的寺院</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516181417893&di=16d75fbd079b88be369aa58abf7f4eed&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dec723c480323dd54357eaf2bb960d9ab%2F574e9258d109b3debbe3a444c6bf6c81800a4cb9.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">皇居</div>
<div class="img-description" title="查看更多">东京皇居位于东京千代田区。在明治维新，江户幕府结束并由明治天皇取回管治权後</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534923459485&di=cb226872f7ff465930b7120400a1195b&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F13520%2F1352610926748p17bmtuvmha5ace0ika1ip2uc13.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">浅草寺</div>
<div class="img-description" title="查看更多">浅草寺位于东京台东区，是日本现存的具有“江户风格”的民众游乐之地。浅草寺是东京都内最古老的寺庙。寺院的大门叫“雷门”，正式名称是“风雷神门”，是日本的门脸、浅草的象征</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516209906240&di=057e2ed9750434828932d9a3ce6c4170&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F108666%2F1396539999669p18kk3aakutrd1rdl1mrb1h0g9b86h.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">银座</div>
<div class="img-description" title="查看更多">银座是日本东京中央区的一个主要商业区，号称“亚洲最昂贵的地方”，象征着日本的繁荣，以高级购物商店闻名</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516182161919&di=66725c71639e1903db5669e9ad3995ac&imgtype=0&src=http%3A%2F%2Fs7.sinaimg.cn%2Fmw690%2F003c59Ougy6HO4U46fsb6%26690" alt="sss" />
<div class="img-footer">
<div class="img-name">东京塔</div>
<div class="img-description" title="查看更多">东京塔是东京地标性建筑物，位于东京都港区芝公园，高332.6米</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516182226727&di=84fa5b2b8b0d4bb771e3e1b84a1fa149&imgtype=0&src=http%3A%2F%2Fpic.iflying.com%2Fupfile%2Feditor%2FTravel%2Fimage%2F20131015%2F20131015110470447044.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">樱花</div>
<div class="img-description" title="查看更多">樱花是蔷薇科樱属几种植物的统称，在《中国植物志》新修订的名称中专指“东京樱花”，亦称“日本樱花”。</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516182421380&di=a51d13514869c4346920ad202fe2effc&imgtype=0&src=http%3A%2F%2Folbpic.ol-img.com%2Falbum%2Fpw%2Fphoto%2FMon_1108%2F43818_4e6b131253148814abe6108dc3f51.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">东京大学</div>
<div class="img-description" title="查看更多">东大诞生于1877年，由“东京开成学校”与“东京医学校”在明治维新期间合并改制而成</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516183064926&di=f6346de9660f24053f81172b5a9cf21d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dfabb4c951bdfa9ece9235e540ab99d76%2F8b13632762d0f70399e7bb5502fa513d2797c5e5.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">江之岛</div>
<div class="img-description" title="查看更多">江之岛位于日本神奈川县藤泽市境内。古时只有在退潮时，才能显出一条从对面湘南海岸通往此岛的沙嘴</div>
</div>
</div>
<div class="e-image">
<img onclick="openModal(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516183008087&di=eee69bc7238a903cfdac88dc7c4bbd33&imgtype=0&src=http%3A%2F%2Fjlweddingstudio.com%2Fwp-content%2Fuploads%2F2013%2F12%2FDSC4597-2%2528pp_w1168_h799%2529.jpg" alt="sss" />
<div class="img-footer">
<div class="img-name">镰仓高校前</div>
<div class="img-description" title="查看更多">镰仓高校前站是一由江之岛电铁（江之电）所经营的铁路车站，位于日本神奈川县镰仓市境内，是江之岛电铁线沿线的一个无人车站</div>
</div>
</div>
<div id="myModal">
<header onclick="closeModal()">×</header>
<div class="img-content" id="myImgContent">
</div>
</div>
.image-container{
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
height:auto;
width:100%;
}
.image-container .e-image {
display: -webkit-flex;
display: flex;
flex-direction: column;
border:solid 1px;
border-radius:4px;
margin:8px;
padding:5px;
perspective: 1000px;
height:auto;
width:255px;
}
.image-container .e-image img {
border-radius:4px;
display: flex;
flex:1 1 auto;
height:250px;
width:100%;
}
.image-container .e-image:hover {
box-shadow:1px 1px 5px #666;
cursor:pointer;
}
.image-container .e-image img:hover{
transform: translateZ(50px);
transition: transform 1s;
}
.image-container .e-image .img-footer {
display:flex;
flex-direction:column;
width:100%;
margin-top:5px;
}
.image-container .e-image .img-footer .img-name {
height:30px;
line-height:30px;
text-align:center;
font-size:18px;
font-weight:bold;
width:100%;
}
.image-container .e-image .img-footer .img-name:hover {
color:#4d94ff;
}
.image-container .e-image .img-footer .img-description {
font-size:12px;
color:#666;
width:100%;
margin:8px 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#myModal {
display: none;
position: fixed;
z-index: 999;
left:50%;
top:30px;
overflow: auto;
background-color: #e5f2ff;
border:solid 1px #999;
width:60%;
transform: translateX(-50%);
-webkit-animation: modal-out 100ms;
animation: modal-out 100ms;
-moz-animation: modal-out 100ms;
box-sizing:border-box;
}
@keyframes modal-out {
0% {top:0px;}
100% {top:30px;}
}
#myModal header{
height:36px;
line-height:36px;
text-align:right;
padding-right:15px;
width:100%;
box-sizing:border-box;
}
#myModal header:hover,#myModal header:hover:focus{
color:#666;
cursor:pointer;
}
#myModal .img-content {
text-align:center;
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
}
#myModal .img-content img{
height:100%;
width:100%;
-webkit-animation: zoom 1s 1 forwards;
-moz-animation: zoom 1s 1 forwards;
animation: zoom 1s 1 forwards;
}
@-webkit-keyframes zoom2 {
0% {height:0%;width:0%;}
100% {height:100%;width:100%;}
}
@-webkit-keyframes zoom {
0% {-webkit-transform: scale(0);transform: scale(0);}
100% {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes zoom {
0% {-webkit-transform: scale(0);transform: scale(0);}
100% {-webkit-transform: scale(1);transform: scale(1);}
}
@media only screen and (max-width: 768px){
.image-container .e-image {
width: 100%;
}
}
@media only screen and (min-width: 769px){
.image-container .e-image {
width: 46%;
}
}
@media only screen and (min-width: 992px){
.image-container .e-image {
width: 22%;
}
}
@media only screen and (min-width: 1200px){
.image-container .e-image {
width:255px
}
}