[해피CGI][cgimall] 이미지 오버하면 변경되는 카드 뉴스 스타일 Player/User Cards

HTML과 CSS만을 사용 가능한 이미지 오버 카드 뉴스 스타일 효과입니다.

소스를 변경하여 다양하게 응용 가능합니다.

HTML 구조

<div class="center">

 

  <div class="card">

    <div class="additional">

      <div class="user-card">

        <div class="level center">

          Level 13

        </div>

        <div class="points center">

          5,312 Points

        </div>

       

          <title id="title">Teacher</title>

          <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar drawn by Alvaro Montoro.</desc>

          <style>

            .skin { fill: #eab38f; }

            .eyes { fill: #1f1f1f; }

            .hair { fill: #2f1b0d; }

            .line { fill: none; stroke: #2f1b0d; stroke-width:2px; }

          </style>

          <defs>

.
.
.

 

</div>

 

CSS 소스

@import url('https://fonts.googleapis.com/css?family=Abel');

 

html, body {

  background: #FCEEB5;

  font-family: Abel, Arial, Verdana, sans-serif;

}

 

.center {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

}

 

.card {

  width: 450px;

  height: 250px;

  background-color: #fff;

  background: linear-gradient(#f8f8f8, #fff);

  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);

  border-radius: 6px;

  overflow: hidden;

  position: relative;

  margin: 1.5rem;

}

 

.card h1 {

  text-align: center;

}

 

.card .additional {

  position: absolute;

  width: 150px;

  height: 100%;

  background: linear-gradient(#dE685E, #EE786E);

  transition: width 0.4s;

  overflow: hidden;

  z-index: 2;

}

 

.card.green .additional {

  background: linear-gradient(#92bCa6, #A2CCB6);

}

 

 

.card:hover .additional {

  width: 100%;

  border-radius: 0 5px 5px 0;

}

 

.card .additional .user-card {

  width: 150px;

  height: 100%;

  position: relative;

  float: left;

}

 

.card .additional .user-card::after {

  content: "";

  display: block;

  position: absolute;

  top: 10%;

  right: -2px;

  height: 80%;

  border-left: 2px solid rgba(0,0,0,0.025);*/

}

 

.card .additional .user-card .level,

.card .additional .user-card .points {

  top: 15%;

  color: #fff;

  text-transform: uppercase;

  font-size: 0.75em;

  font-weight: bold;

  background: rgba(0,0,0,0.15);

  padding: 0.125rem 0.75rem;

  border-radius: 100px;

  white-space: nowrap;

}

 

.card .additional .user-card .points {

  top: 85%;

}

 

.card .additional .user-card svg {

  top: 50%;

}

 

.card .additional .more-info {

  width: 300px;

  float: left;

  position: absolute;

  left: 150px;

  height: 100%;

}

 

.card .additional .more-info h1 {

  color: #fff;

  margin-bottom: 0;

}

 

.card.green .additional .more-info h1 {

  color: #224C36;

}

 

.card .additional .coords {

  margin: 0 1rem;

  color: #fff;

  font-size: 1rem;

}

 

.card.green .additional .coords {

  color: #325C46;

}

 

.card .additional .coords span + span {

  float: right;

}

 

.card .additional .stats {

  font-size: 2rem;

  display: flex;

  position: absolute;

  bottom: 1rem;

  left: 1rem;

  right: 1rem;

  top: auto;

  color: #fff;

}

 

.card.green .additional .stats {

  color: #325C46;

}

 

.card .additional .stats > div {

  flex: 1;

  text-align: center;

}

 

.card .additional .stats i {

  display: block;

}

 

.card .additional .stats div.title {

  font-size: 0.75rem;

  font-weight: bold;

  text-transform: uppercase;

}

 

.card .additional .stats div.value {

  font-size: 1.5rem;

  font-weight: bold;

  line-height: 1.5rem;

}

 

.card .additional .stats div.value.infinity {

  font-size: 2.5rem;

}

 

.card .general {

  width: 300px;

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  z-index: 1;

  box-sizing: border-box;

  padding: 1rem;

  padding-top: 0;

}

 

.card .general .more {

  position: absolute;

  bottom: 1rem;

  right: 1rem;

  font-size: 0.9em;

}

 

 

 

해당 사이트로 이동하거나 첨부파일을 다운로드하여
전체 소스를 확인하실 수 있습니다.