Q&A
参考元があるのなら、そのコードを追ってみては。
模写でどういう制限があるのか知らないですが、自身で解決しないのでしたら模写先のコードを見るのも質問して得るのもほとんど変わらないかと思います。
今、あるサイトの模写をしているのですが、
キャプチャ画像のように、マウスをホバーすると、画像を（ふわっと）表示させるようにするには、どういった実装方法が考えられるでしょうか。
javascriptで、addclass,removeclassをして解決できるのかな?といったなんとなくのイメージはあるのですが、漠然としたままよくわかっていないです。
初歩的な質問かもしれないですが、答えてくださると幸いです。よろしくお願いします。
確かにそうなのですが、個人的に色々調べたり、こういったサイトで聞いたりしてもどうしてもわからなかった時に、最終的にコードは見るようにしたいので、ご理解よろしくお願いします。
では、まず思ったようにコードを書いてみると良いです。
なんとなくのところから失敗して試行錯誤で詰めていくのも１つですが、
今回の質問内容からだとやってみたことが何も伝わってきません。
わかりました。ありがとうございます。次回以降質問させていただくときには、もう少し思考過程等も書くことを意識していこうと思います。
いえ、質問は編集できるのでいつ来るかわからない次回に持ち越すのではなく今やりましょう。
https://gyazo.com/8958f2bff2d6192a941628da46d67133 ほかの回答者さんの意見も参考にしたところ、上の画像の段階では少しまだ荒いですが（それに画像は訳ありで別の画像になっていますが…）大体の実装は出来ました。ただ、transition等のプロパティをまだ使いこなせていない節があるのでそこに関して理解を深めていきたいと思います。厳しくも暖かい指摘を毎回ありがとうございます。
質問は編集できますし、画像（GIFアニメも含めて）も添付できます。
回答2件
1
ヒントだけだしておきます。
css transition で opacity(透明度) をアニメーションさせれば簡単に実装できます。
transition - CSS: カスケーディングスタイルシート | MDN
位置も少しずらしているようのなで、transform も。
投稿2020/10/07 05:21
編集2020/10/07 05:23
総合スコア34362
すみません、イメージが少しつかみにくいのですが、
画像は、Image タグでしょうか？ それともbackground-imageでしょうか…？
そして、ホバーしたときに画像の透明度を1にするという感じでしょうか‥？
どっちでも可能ですけど、テキストを重ねたいとか、いろいろ希望もあると思いますので、とりあえずはうまくいかなくても、自分でコードを書いてみて、質問に追記してください。
ありがとうございます。とりあえず一通りやってみることにします。
いちおうサンプル作ったのでご参考に。
https://codepen.io/hatena19/pen/bGeGEzW
opacityプロパティ及び擬似要素のhoverを組み合わせることで、このようなデザインもできてしまうのですね…。勉強になります。ありがとうございます。
1
ベストアンサー
透明度の変更と位置をずらすcssをかけばよいでしょう。
投稿2020/10/07 05:19
編集2020/10/07 05:25
総合スコア117709
雑なサンプル
<style>
.hoge img{opacity:0;margin-top:10px;}
.hoge:hover img{opacity:1;margin-top:0px; transition: 0.5s;}
</style>
<span class="hoge">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=test">
</span>
これに少し改良を加えれば、何とか実装できる気がしてきました。ありがとうございます。
ただ、この方法だと、キャプチャ画像のように文字の色を変えるには、もともと文字の色を変えたテキストを含む画像を用意しなければ難しい・・？という気がしたのですが、全然そんなことはないのでしょうか。
サンプルつけてあるのでコピペして試してみてください
（たぶんタイミングが悪くてサンプル確認できなかったんだとは思いますが・・・）
すみません、タイミングの入れ違いがおきてました。改めてお聞きしたいのですが、この方法だと、キャプチャ画像のように文字の色を変えるには、もともと文字の色を変えたテキストを含む画像を用意しなければ難しい・・？という気がしたのですが、全然そんなことはないのでしょうか。
＞文字色
こんな感じで
<style>
.hoge {display:inline-block;width:150px;line-height:160px;text-align:center;position:relative;}
.hoge span{color:black;z-index:2;position:relative;}
.hoge:hover span{color:white;transition: 0.5s;}
.hoge img{opacity:0;margin-top:10px;position:absolute;left:0;z-index:1;}
.hoge:hover img{opacity:1;margin-top:0px; transition: 0.5s;}
</style>
<span class="hoge">
<span>CONTACT</span>
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=test">
</span>
ありがとうございました。だいぶ実装のイメージをつかむことが出来ました。もう少し自分でも、transition及び、z-indexについて復習していきたいと思います。
あなたの回答
tips
プレビュー
