CSSのホバーエフェクト

締切済

質問者：unimo
質問日時：2023/06/19 06:53
回答数：1件

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;
}

お見苦しくて申し訳ありません。
ｐの配置やホバーした時の挙動が上手くできません。
分かる方いらっしゃいましたらご教授お願い致します。
簡単な説明もいだたければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2023/06/20 01:31

こんにちは

たいしてわかりませんけれど・・・

タイトルは「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 を変えればスライドインするようなことも可能です。