【もりけん塾47日目】youtubeのhover effect模写

LP制作を始めて作成している、ねこらのん（@nekoranon256）です。

youtubeの動画を模写して、今必要としているhoverについて調べました。

1 youtubeの模写
- 1.1 html
- 1.2 CSSの調べたもの付き
2 hoverについて
- 2.1 疑似クラス
- 2.2 ルール
3 おわりに

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）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ

Post Views: 57