Web プログラミング

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

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についてメモしていたので備忘録。

 

  1. 発動:マウスが要素の上においたとき(linkだけでなく全ての要素に利用可能)
  2. linkの場合:訪問済みページへのリンクはvisitedを使う、アクティブリンクのスタイル設定はactiveを使う
  3. ブラウザーサポート:クロム、Firefox(Gecko)、Internet Explorer(IE)、オペラ、Safari(WebKit)
  4. 使い方:.button:hover + .result{}

疑似クラス

疑似クラス:セレクタに付加するキーワード。選択された要素に特定の状態を指定。

 

擬似クラスの例

  1. hover:マウスの位置
  2. visited:閲覧履歴
  3. checked:コンテンツの状態

など他にも多くあるけど、擬似クラス/MDNに詳細あり。

 

ルール

ルールは以下のとおり。

  • LVHA 順: :link — :visited — :hover — :activeの順番。
    注意:順番に記載しないとうまくいかない。CSSルールは後に記述されたものが優先適用
  • :link と :visited の後、 :active の前に :hover の規則

 

おわりに

同じように自分の作成していることに展開しようとしましたが、そのままはやはり難しかったです。

 

模写した、transform: translateYがヒントになると思うのでこれを取り入れていこうと思います。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada