webデザインの初心者です。
以下のようなサイトのホバーエフェクトがうまくできなくて困っています。
https://www.tourtravelworld.com/
スクロールするとBrowse Top Travel Attractions by Categoryというところに
画像がが並んでいるのですが、グリッドで並べても上手く揃わなくて、cssではこのように記述して揃えました。
HTML
<div class="container">
<div class="div1"><a class="block-anker" href="https://www.tourtravelworld.com/wildlife-tours/" … src="images/ttabc-img1.jpg" alt="wildlife">
<div class="mask"><p>wildlife-tours</p><br><span>view more</span></div></a>
</div>
<div class="div2"><a class="block-anker" href="https://www.tourtravelworld.com/adventure-tours/ … src="images/ttabc-img2.jpg" alt="climbing">
<div class="mask"><p>adventure-tours</p><br><span class="btn">view more</span></div> </a>
</div>
<div class="div3"><a class="block-anker" href="https://www.tourtravelworld.com/heritage-tours/" … src="images/ttabc-img3.jpg" alt="heritage">
<div class="mask"><p>heritage-tours</p><br><span class="btn">view more</span></div></a>
</div>
<div class="div4"><a class="block-anker" href="https://www.tourtravelworld.com/beach-tours/"><img src="images/ttabc-img4.jpg" alt="beach">
<div class="mask"><p>beach-tours</p><br><span class="btn">view more</span></div></a>
</div>
div5 div6も同様です。
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 5px 5px;
margin: 30px 0 60px;
grid-auto-flow: row;
grid-template-areas:
"div1 div3 div3 div4 div6"
"div2 div3 div3 div5 div6";
}
.div1 { grid-area: div1; }
.div2 { grid-area: div2; }
.div3 { grid-area: div3; }
.div4 { grid-area: div4; }
.div5 { grid-area: div5; }
.div6 { grid-area: div6; }
.container ::before{
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 100%;
}
.container img{
width: 100%;
height: 100%;
object-fit: cover;
}
お見苦しくて申し訳ありません。
pの配置やホバーした時の挙動が上手くできません。
分かる方いらっしゃいましたらご教授お願い致します。
簡単な説明もいだたければ幸いです。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
たいしてわかりませんけれど・・・
タイトルは「CSSのホバーエフェクト」ですが、文章の内容はレイアウトの話のようで、どっちなんでしょうかね?
ちなみに、ご提示のサイトの該当部分のレイアウトは、Flexレイアウトで4列の表示にしておいてから、1番目と3番目は更にその中でflexで縦にに分割して表示するような方法をとっているようです。
同様のレイアウトをgridで実現したいということでしょうか?
ご例示のサイトでは、それなりにタグがネストしていたりしますが、
以下は、HTMLの構造をごく単純化したサンプルですので、ご参考にでもなれば。
(サイズなどの指定は適当にしてあります。
レイアウトが目視できるように背景色を設定してあります。)
<div id="wrap"><div class="item">
の構造にしてありますが、<ul><li>などでも宜しいかと思います。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrap {
display: grid;
max-width: 900px; margin: 1em auto;
grid-template-columns: 1fr 2fr 1fr 1fr;
grid-auto-rows: min(18vw, 175px);
grid-auto-flow: column;
grid-gap: 5px;
}
#wrap .item:nth-child(3),
#wrap .item:nth-child(6) { grid-row: 1/3; }
/* 識別のための色付け */
#wrap .item { background-color: lightgreen; }
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
>ホバーエフェクトがうまくできなくて困っています。
ホバー時の動作は各要素で共通ですが・・
・要素内に「常時表示要素」と「ホバー時表示要素」を記述しておいて
「ホバー時表示要素」は通常時は非表示(display:none)
・要素にホバーした際に、「ホバー時表示要素」を表示
としているだけです。(CSSの :hover 疑似クラスで設定)
(ご提示のサイトでは、短時間の transitionも設定してあるようです)
https://developer.mozilla.org/ja/docs/Web/CSS/:h …
例えば、上記の<div class="item">を例にすれば、HTMLを
<div class="item">
<a href="#">
<img src="./img/photo01.jpg">
<div class="info">
<p>Article Title</p><span>view more</span>
</div>
</a>
</div>
とでもしておいて、CSSで、
#wrap .item { position: relative; }
#wrap .info {
box-sizing: border-box;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 10px solid transparent;
background-color: rgb(0, 0, 0, .5);
background-clip: padding-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: min(1.8vw, 18px) ;
font-weight: bold; color: white;
opacity: 0;
transition: all .5s ease;
}
#wrap .item:hover .info { opacity: 1; }
#wrap .info span { font-size: 0.8em; }
#wrap .item img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
とでもしておけば、ご例示のサイトと方法は異なりますが、同じ様な結果になります。
上例では display ではなく、opacity を変更することで表示/非表示を変更しています。
opacityではなく、top や left を変えればスライドインするようなことも可能です。
詳しい解説ありがとうございました。
とても分かりやすくてどこを見ればいいのか納得しました。
デベロッパーツールの使い方まだまだですね。
書籍を何冊か購入したので頑張って勉強します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
terapadの使い方について
-
最近、HTMLのヘッダーをIDで定...
-
display:table-cell内でこんな...
-
dreamweaverのコード画面で波線。
-
文字の両側に画像を配置するCSS...
-
HTML要素のid/class名の長さに...
-
ラジオボタンの装飾(色の違う2...
-
name属性とid属性
-
liリストタグの背景色に色がつ...
-
idの中のid指定
-
CSSのタグ「#warpper」の意...
-
htmlの文字が縦書きになる
-
HTML ul li で横並びにナビゲー...
-
【ヒトの神秘】美男美女から何...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートでデザイン
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報