0
이미지 집합에 마우스를 가져 가면 호버 효과가 나타납니다. 마우스를 올려 놓으면 일부 정보가 표시됩니다. 여기에 코드입니다 :Google 크롬에서이 코드를 올바르게 렌더링 할 수 없습니다.
HTML
<ul class="photo-grid">
<li>
<a href="https://www.abglobal.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1773 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/101ABGlobal.png" alt="Client SoHo Dragon" alt="Client" width="125" height="125" />
<figcaption><p>AB is a leading global investment-management and research firm. We bring together a wide range of insights, expertise and innovations to advance the interests of our clients around the world.</p></figcaption>
</figure>
</a>
</li><li>
<a href="http://www.morganstanley.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1774 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/102MorganStanley-e1484752671108.png" alt="Client SoHo Dragon" width="125" height="125" />
<figcaption><p>At Morgan Stanley, we advise, originate, trade, manage and distribute capital for governments, institutions and individuals, and always do so with a standard of excellence.</p></figcaption>
</figure>
</a>
</li><li>
<a href="https://www.mizuho-sc.com" target="_blank">
<figure>
<img class="alignnone wp-image-1775 size-full" title="Client SoHo Dragon" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/103Mizuho.png" alt="Mizuho" width="125" height="125" />
<figcaption><p>Mizuho Securities is an investment bank that offers optimal solutions for a broad range of clients using its global network of businesses.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.eminencecapital.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1776 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/105Eminence.png" alt="105Eminence" width="125" height="125" />
<figcaption><p>Eminence Capital is a New York based hedge fund.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.kgsalpha.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1777 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/106KGS.png" alt="106KGS" width="125" height="125" />
<figcaption><p>KGS-Alpha is an independent broker-dealer that provides premiere financial services to an institutional client base.</p></figcaption>
</figure>
</a>
</li><li><a href="http://greenpages.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1778" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/111GreenPages-150x150.png" alt="111GreenPages" width="125" height="125" />
<figcaption><p>Green Pages' Cloud Solutions solve traditional IT challenges in new ways.</p></figcaption>
</figure>
</a>
</li><li><a href="www.incyte.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1779" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/112Incyte-150x150.png" alt="112Incyte" width="125" height="125" />
<figcaption><p>Incyte is a science-led biopharmaceutical research company specializing in oncology product development and innovative medicines that are used worldwide.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.gilbaneco.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1780" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/113Gilbane-150x150.png" alt="113Gilbane" width="125" height="125" />
<figcaption><p>Gilbane, Inc. is a builder and developer of some of the most highly visible projects domestically and internationally.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mbpce.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1781" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/114MBP-150x150.png" alt="114MBP" width="125" height="125" />
<figcaption><p>MBP provides a wide range of cost-effective services in construction management and dispute resolution.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.cbi.com/Home" target="_blank">
<figure>
<img class="alignnone wp-image-1782" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/115CBI-150x150.png" alt="115CBI" width="125" height="125" />
<figcaption><p>CB&I is the world leader of fabricated piping systems.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www1.nyc.gov/site/nycha/index.page" target="_blank">
<figure>
<img class="alignnone wp-image-1783" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/116NYCHA-150x150.png" alt="116NYCHA" width="125" height="125" />
<figcaption><p>The New York City Housing Authority's mission is to increase opportunities for low- and moderate-income New Yorkers by providing safe, affordable housing and facilitating access to social and community services.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.flickr.com/photos/aigle_dore/5238557764/" target="_blank">
<figure>
<img class="alignnone wp-image-1784" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/119SmartMoney-150x150.png" alt="119SmartMoney" width="125" height="125" />
<figcaption><p>Smart Money</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mdc-partners.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1785" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/120MDC-150x150.png" alt="120MDC" width="125" height="125" />
<figcaption><p>MDC Partners Inc. is an advertising and marketing holding company based in New York City.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mcgraw-hill.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1786" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/121McGrawHill-150x150.png" alt="121McGrawHill" alt="120MDC" width="125" height="125" />
<figcaption><p>Global publishing, financial, information and media services. Includes details of markets, careers and investor services.</p></figcaption>
</figure>
</a>
</li><li><a href="www.wrox.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1787" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/122Wrox-150x150.png" alt="122Wrox" width="125" height="125" />
<figcaption><p>Wrox is a leading information provider for programmers. Publishing books written for programmers by programmers.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.linkedin.com/company/kavoo"target="_blank">
<figure>
<img class="alignnone wp-image-1788" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/123Kavoo-150x150.png" alt="123Kavoo" width="125" height="125" />
<figcaption><p>Kavoo provides private air charter flight services; and SkyLimo, an air taxi service</p></figcaption>
</figure>
</a>
</li><li><a href="https://home.kpmg.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1789" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/124KPMG-150x150.png" alt="124KPMG" width="125" height="125" />
<figcaption><p>KPMG provides audit, tax and advisory services. We work closely with our clients, helping them to mitigate risks and grasp opportunities.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.pwc.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1790" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/125PWC-150x150.png" alt="125PWC" width="125" height="125" />
<figcaption><p>PWC focuses on audit and assurance, tax and consulting services. We help resolve complex issues and identify opportunities.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.akaes.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1791" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/126AKA-150x150.png" alt="126AKA" width="125" height="125" />
<figcaption><p>AKA Enterprise Solutions provides Microsoft Dynamics solutions for Financial Services, Media & Entertainment, Life Sciences, and the Public Sector.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.airforce.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1792" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/127USAF-150x150.png" alt="127USAF" width="125" height="125" />
<figcaption><p>The United States Air Force is the aerial warfare service branch of the United States Armed Forces.</p></figcaption>
</figure>
</a>
</li><li><a href="http://oysterbaytown.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1793" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/128OysterBay-150x150.png" alt="128OysterBay" width="125" height="125" />
<figcaption><p>The Town of Oyster Bay is easternmost of the three towns in Nassau County, New York, in the United States.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.shu.edu/" target="_blank">
<figure>
<img class="alignnone wp-image-1794" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/129SetonHall-150x150.png" alt="129SetonHall" width="125" height="125" />
<figcaption><p>Seton Hall University is a private Roman Catholic university in South Orange, New Jersey, United States.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.robinhood.org/" target="_blank">
<figure>
<img class="alignnone wp-image-1795" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/130RobinHood-150x150.png" alt="130RobinHood" alt="126AKA" width="125" height="125" />
<figcaption><p>Robin Hood has a single objective: end poverty in NYC.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.itg.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1796" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/163-ITG-150x150.png" alt="163 ITG" width="125" height="125" />
<figcaption><p>Investment Technology Group, Inc. is a global financial technology company that helps leading brokers and asset managers improve returns for investors around the world. </p></figcaption>
</figure>
</a>
</li><li><a href="http://www.foxnews.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1797" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/164FoxNews-150x150.png" alt="164FoxNews" width="125" height="125" />
<figcaption><p>FOX News Channel is a 24-hour all-encompassing news service dedicated to delivering breaking news as well as political and business news.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.dowjones.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1798" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/165DowJones-150x150.png" alt="165DowJones" width="125" height="125" />
<figcaption><p>Dow Jones brings together world-leading data, media, membership and intelligence solutions to power the most ambitious companies and professionals</p></figcaption>
</figure>
</a>
</li><li><a href="http://nj.gov/dca/" target="_blank">
<figure>
<img class="alignnone wp-image-1799" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/166StateOfNJ-150x150.png" alt="166StateOfNJ" width="125" height="125" />
<figcaption><p>The New Jersey Department of Community Affairs is created to provide administrative guidance, financial support and technical assistance to local governments, community development organizations, businesses and individuals to improve the quality of life in New Jersey.</p></figcaption>
</figure>
</a>
</li><li><a href="www.greenhill.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1800" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/167GreenHill-150x150.png" alt="167GreenHill" alt="163 ITG" width="125" height="125" />
<figcaption><p>Greenhill is a leading independent investment bank focused on providing financial advice globally on significant mergers, acquisitions, restructurings, financings and capital advisory to corporations, partnerships, institutions and governments.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.ironwoodpharma.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1801" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/168Ironwood-150x150.png" alt="168Ironwood" width="125" height="125" />
<figcaption><p>Ironwood Pharmaceuticals focuses on three goals: transforming knowledge into medicines that make a difference for patients, creating value that will inspire the continued support of our fellow shareholders, and building a team that passionately pursues excellence.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.foodcity.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1808 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2017/01/169FoodCity-e1484754247113.png" alt="169FoodCity" width="125" height="125" />
<figcaption><p>Food City is an American supermarket chain with stores located in Georgia, Kentucky, Tennessee, and Virginia.</p></figcaption>
</figure>
</a>
</li>
</ul>
CSS
.photo-grid {
overflow:auto;
max-width: 700%;
text-align: center;
}
.photo-grid li {
display: inline-block;
width: 125px;
}
.photo-grid img {
display: block;
float: left;
height: auto;
max-width: 100%;
}
.photo-grid figure {
height: 125px;
overflow: hidden;
position: relative;
width: 125px;
}
.photo-grid figcaption {
background: rgba(0,0,0,0.8);
color: white;
display: table;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.photo-grid figcaption p {
display: table-cell;
font-size: 0.7em;
position: relative;
top: -5px;
width: 125px;
vertical-align: middle;
}
.photo-grid li:hover figcaption {
opacity: 1;
}
.photo-grid figure {margin:0;width:auto;}
.photo-grid li { width: auto;}
문제는이 코드는 마이크로 소프트 에지, 인터넷 익스플로러와 파이어 폭스에 완벽하게 잘 작동하지만 제대로 렌더링하지 않는다는 것입니다 구글 크롬. Chrome 브라우저에서 캐시를 삭제했지만 문제가 계속 발생합니다. JSFiddle을 첨부했습니다.
문제는 각 행 또는 방법 figcaption의 렌더링 사이의 공간인가? – mikeg542
Chrome에서 잘 작동하는 것 같습니다. – AVAVT
무엇이 문제입니까? Chrome 56.0.2924.87 (64 비트) 및 masOS 10.12.3에서 잘 작동합니다. –