LP制作を始めて作成している、ねこらのん(@nekoranon256)です。
youtubeの動画を模写して、今必要としているhoverについて調べました。
youtubeの模写
この動画を参考にしました。
html
htmlです。
html<!-- youtube --><!DOCTYPE html><html lang="en"><head><metacharset="UTF-8"><title>card hover effects</title><linkrel="stylesheet"href="style.css"></head><body><divclss="container"><divclass="card"><divclass="face face1"><divclass="content"><imgsrc="design.png" ><h3>design</h3></div></div><divclass="face face2"><divclass="content"><p>lorem ipsum dolor sitamet,consectur adipisicing elit,sed do eiusmod temporincididunt ut lampor et dolore magna aliqua.</p><ahref="#">rede more</a></div></div></div><divclass="card"><divclass="face face1"><divclass="content"><imgsrc="design.png" ><h3>design</h3></div></div><divclass="face face2"><divclass="content"><p>lorem ipsum dolor sitamet,consectur adipisicing elit,sed do eiusmod temporincididunt ut lampor et dolore magna aliqua.</p><ahref="#">rede more</a></div></div></div><divclass="card"><divclass="face face1"><divclass="content"><imgsrc="design.png" ><h3>design</h3></div></div><divclass="face face2"><divclass="content"><p>lorem ipsum dolor sitamet,consectur adipisicing elit,sed do eiusmod temporincididunt ut lampor et dolore magna aliqua.</p><ahref="#">rede more</a></div></div></div></div></body></html>
画像や<P>、<h3>部分は全て同じにしています。
CSSの調べたもの付き
cssです。
html/* youtubeのcss */body {/* ↓margin(外側余白)とpadding(内側余白)上や横にある謎の外側の空白消し */margin: 0;padding: 0;/* ↓指定セレクタの高さをすくなくとも表示領域と同じにする*/min-height: 100vh;/* ↓flexを使うことの宣言と以下3つによって上下中央配置をする */display: flex;justify-content: center;align-items: center;font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;}/*3つのcardを横揃え*/.conteiner {width: 1000px;/* ↓本来の表示位置を基準に指定 */position: relative;display: flex;/* ↓左右に空間を開けて空白を作る */justify-content: spase-between;}/* 3つのcardの標準位置指定 */.conteiner .card {/* ↓本来の表示位置を基準に指定 */position: relative;}/* 位置を右上に移動*/.conteiner .card .face {width: 300px;height: 200px;transition: 0.5s;}/* face1とface2で1つ *//* 画像 *//* 位置を右上に移動 */.conteiner .card .face .face1 {position: relative;background: #ffffff;display: flex;justify-content: center;align-items: center;z-index: 1;/* 画像とテキストを重ねる */transform: translateY(100px);}/* ↓①マウスを当てるとimg赤くなり、上にスライドされ下にあるテキストが表示 */.conteiner .card:hover .face .face1 {background: #ff00ff;transform: translateY(0);}/* テキスト部分 、助けさせるimgを*/.conteiner .card .face .face1 .content {opacity: 0.2;transition: 0.5s;}/* カーソルが当たるとimgの色が白になる */.conteiner .card:hover .face .face1 .content {opacity: 1;}/* imgがマウスをあてると小さくなる */.conteiner .card .face .face1 .content img {max-width: 100px;}/* imgとテキストの配置を近づけた */.conteiner .card .face .face1 .content h3 {margin: 10px00;padding: 0;color: #fff;text-align: center;font-size: 1.5em;}/* テキスト部分に背景色白を */.conteiner .card .face .face2 {position: relative;background: #ffffff;display: flex;justify-content: center;align-items: center;padding: 20px;box-sizing: border-box;box-shadow: 020px50pxrgba(0, 0, 0, 0, 8);/* ↓②imgとテキストのboxが完全一致で重なる指定 */transform: translateY(-100px);}/* ↓③画像が完全にスライドされて、見えなかった部分のテキストが完全に表示される */.conteiner .card:hover .face .face2 {transform: translateY(0);}/* テキストの位置 */.conteiner .card .face .face2 .content p {margin: 0;padding: 0;}/* テキストの位置 */.conteiner .card .face .face2 .content a {margin: 15px00;display: inline-block;text-decoration: none;font-weight: 900;color: #333;padding: 5px;border: 1pxsolid#333;}/* readmoreの背景色 */.conteiner .card .face .face2 .content a :hover {background: #333;color: #fff;}
hoverについて
hoverについてメモしていたので備忘録。
- 発動:マウスが要素の上においたとき(linkだけでなく全ての要素に利用可能)
- linkの場合:訪問済みページへのリンクはvisitedを使う、アクティブリンクのスタイル設定はactiveを使う
- ブラウザーサポート:クロム、Firefox(Gecko)、Internet Explorer(IE)、オペラ、Safari(WebKit)
- 使い方:.button:hover + .result{}
疑似クラス
疑似クラス:セレクタに付加するキーワード。選択された要素に特定の状態を指定。
擬似クラスの例
- hover:マウスの位置
- visited:閲覧履歴
- checked:コンテンツの状態
など他にも多くあるけど、擬似クラス/MDNに詳細あり。
ルール
ルールは以下のとおり。
- LVHA 順: :link — :visited — :hover — :activeの順番。
注意:順番に記載しないとうまくいかない。CSSルールは後に記述されたものが優先適用 - :link と :visited の後、 :active の前に :hover の規則
おわりに
同じように自分の作成していることに展開しようとしましたが、そのままはやはり難しかったです。
模写した、transform: translateYがヒントになると思うのでこれを取り入れていこうと思います。
もりけん塾(@terrace_tech)