1
ギャラリーを作成しようとしていますが、リンクは下から ホバーに表示されます。私は彼らがホバリングしていないときにそれらを隠すことに関して問題を抱えています。ホバー効果の変換プロパティ
私はギャラリーを作ろうとしていますが、リンクは下から ホバーに表示されます。私は彼らがホバリングしていないときにそれらを隠すことに関して問題を抱えています。 ギャラリーを作ろうとしていますが、下からリンクが表示されます。 ホバー。私は彼らがホバリングしていないときにそれらを隠すことに関して問題を抱えています。 ギャラリーを作ろうとしていますが、下からリンクが表示されます。 ホバー。私は彼らがホバリングしていないときにそれらを隠すことに関して問題を抱えています。 ギャラリーを作ろうとしていますが、下からリンクが表示されます。 ホバー。私は彼らがホバリングしていないときにそれらを隠すことに関して問題を抱えています。
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
<a href="http://google.com">Link</a>
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
<a href="http://google.com">Link</a>
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
<a href="http://google.com">Link</a>
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
<a href="http://google.com">Link</a>
</div>
</div>
</main>
</body>
あなたはたくさんのthnx画像 – ab29007
を追加することができます...！ – ab29007