javascript - HTML/CSS のテキストでサムネイルを作成する

Question

私は HTML や CSS に非常に慣れていないので、私が求めていることは非常にばかげているかもしれません。写真とタイトルを表示するサムネイルを作成し、それをクリックすると、写真と大きなテキストを含む「ボックス」が表示されるかどうかは疑問です（Safariのリーダー機能などに似た方法です）。出来ますか？

前に言ったように、私は HTML と CSS から始めたばかりです。

Answer 1

これは確かに可能です。

最初に div を作成し、次に css を使用して背景のプロパティを選択し、それを適合させます。

コードは次のとおりです。

<div class="img" style="
    overflow: hidden;
    height: 50px; <!-- Set the size of the div -->
    width: 50px;
    background: url(http://blog.moovweb.com/wp-content/uploads/2013/04/stackoverflow-logo.png);
    background-size: 50px 50px; <!-- Set the size of the image -->
    background-repeat: no-repeat;">
</div>

ボックスに合わせて画像が歪んでいることに注目してください。

テキストを div に入力するか、新しいテキストを作成してテキストの位置を変更することで、テキストを追加できます。

お役に立てれば！