Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/all.css">
    <title>人員卡片介紹</title>
</head>
<body>
 <div class="wrap">
     <div class="card">
         <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
         <div class="text">
             <h2>導演</h2>
             <p>幻想大全先進性原創採購招聘製品,當時吸引懂得在此我是出售的說來了億元常常我們標誌,當我死了優勢重新些什麼協助管理痛苦各地練習那樣人大傳奇,房價我還病毒下了得分一時包含你們的完了到了尤其可能會,圖書桃園作用本月銀行三年成長一定會你的住了青草湖隱藏下載,問道。</p>
         </div>
     </div>

     <div class="card">
        <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
        <div class="text">
            <h2>編劇</h2>
            <p>幻想大全先進性原創採購招聘製品,當時吸引懂得在此我是出售的說來了億元常常我們標誌,當我死了優勢重新些什麼協助管理痛苦各地練習那樣人大傳奇,房價我還病毒下了得分一時包含你們的完了到了尤其可能會,圖書桃園作用本月銀行三年成長一定會你的住了青草湖隱藏下載,問道。</p>
        </div>
    </div>

    <div class="card">
        <img src="https://images.unsplash.com/photo-1553907725-c3d2e2ccc00e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
        <div class="text">
            <h2>場記</h2>
            <p>幻想大全先進性原創採購招聘製品,當時吸引懂得在此我是出售的說來了億元常常我們標誌,當我死了優勢重新些什麼協助管理痛苦各地練習那樣人大傳奇,房價我還病毒下了得分一時包含你們的完了到了尤其可能會,圖書桃園作用本月銀行三年成長一定會你的住了青草湖隱藏下載,問道。</p>
        </div>
    </div>
 </div>
</body>
</html>
              
            
!

CSS

              
                /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

// css reset



* {
    box-sizing: border-box;
}

body,
html {
    height: 100%;
}

body {
    align-items: center;
    display: flex;
    background-color: #01000a;
}

.wrap {
    width: 1200px;
    display: flex;
    margin: 0 auto;

}

.card {
    width: 385px;
    margin: 15px;
    background-color: #fff;
    border: 1px solid #a8a8a8;
    transform: translateY(0px);
    // 卡片互動,讓互動的卡片歸位
    transition: 0.3s;

    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        // 在圖片中置中對齊
    }

    h2 {
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #333333;
        padding-bottom: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

    P {
        line-height: 1.5;
        text-align: left;

    }

    &:hover {
        .text:before {
            border-left: 184px solid #ffb978;
            border-right: 184px solid #ffb978;
            //滑鼠移動到卡片後,線條顏色變成指定顏色
           
        }

        .text {
            background-image: linear-gradient(0deg, #ff6464, #ffb978);
            //滑鼠移動到卡片後,文字背景變成漸層色彩,為了從底部漸層開始設定從 0deg 往上漸層
            transition: 0.3s;
        }
    }

    .text {
        padding: 1em;
        position: relative;
        // 設定絕對定位的父元素在卡片的文字中

        &:before {
            content: '';
            //偽元素要搭配 content 不然會失效
            width: 0;
            height: 0;
            position: absolute;
            // 用絕對定位,將 display 轉為 Block
            left: 0;
            top: 0;
            // 讓三角形在定位中靠左靠上對齊
            border-top: 50px solid transparent;
            // 設定線條為transparent透明
            border-left: 184px solid #fff;
            border-right: 184px solid #fff;
            // 將左右的線條改為白色
            transform: translateY(-100%);
            // 使用變形然後位移-100%
        }
    }

    &:hover {
        transform: translateY(-50px);

        // 滑鼠移動到指定卡片會有互動   
        h2 {
            color: #fff;
            border-bottom: 1px solid #ffffff;
            //滑鼠移動後 h2 的互動特效,文字與底線變成白色
            transition: 0.3s;
        }

        p {
            color: #fff;
            //滑鼠移動後 p 的互動特效變成白色
            transition: 0.3s;
        }
    }

}
              
            
!

JS

              
                
              
            
!
999px

Console