1
画像の上にオーバーレイを作成し、オーバーレイに成功しました。私が画像の上にマウスを置くと、それは青色に変わり、私の望むテキストが現れます。CSS/HTMLオーバーレイアライメントが不十分
しかし、オーバーレイは画像と位置がずれるため、どうすればよいか分かりません。位置や画像コードなどのオーバーレイコードを調整する必要があるかどうかはわかりません。それは次のようになります。
h1 {color: green; letter-spacing:5px;
\t font-family: "Times New Roman";
\t text-align: center; padding-bottom: 5px;}
\t
.img {width:80%;
height:80%; margin-bottom:100px;
display: block; position: relative
}
.container {
position: relative;
width: 50%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 80%;
width: 80%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}<!DOCTYPE html>
<html>
<body>
\t <h1>
\t <marquee behavior="alternate" direction="right" scrollamount="20">
\t The Harry Potter Series</marquee></h1>
<div class="container">
\t <img class="img" src="https://ewedit.files.wordpress.com/2016/09/kkhp1-lg.jpg?w=399.png" >
\t <div class="overlay">
\t <div class="text">Hello World</div>
</div>
</div>
<div class="container">
\t <img class="img move" src="https://ewedit.files.wordpress.com/2016/09/kkhp2.jpg?w=399.png">
\t <div class="overlay">
\t <div class="text">Hello World</div>
</div>
</div>
</body>
</html>
のために働くだろう
.overlay {height:100%;}を作る実際のコードだけでなく、スクリーンショットを共有してください。ありがとう！ –スクリーンショットだけでなく、作業コードを投稿してください。誰もあなたのためにそれを再入力しません。 –
またhtmlです – Noni