Добавить изображение над блоком

Question

Я использую эту мини ценовой таблицу: http://codepen.io/joejoinerr/pen/CJAkK

Как я могу поместить изображение на нем? Как это:

Кодекс ценовой таблицы также здесь:

HTML:

<div class="pricing"> 
    <div class="price-option price-option--low"> 
    <div class="price-option__detail"> 
     <span class="price-option__cost">$0</span> 
     <span class="price-option__type">Freeuser</span> 
    </div> 
    <a href="#" class="price-option__purchase">Get</a> 

CSS:

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
html, 
body { 
    height: 100% 
} 
body { 
    background: #454c4f; 
    font: 1em/1.5 'Droid Sans', sans-serif; 
} 
.pricing { 
    @include translate(-49%, -49.1%); 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 310px; 
    font-size: 0; 
    opacity: 1; 
    transition: opacity .2s ease; 
} 

.price-option { 
    display: inline-block; 
    width: 6.25em; 
    vertical-align: middle; 
    margin-right: 0.3125em; 
    font-size: 16px; 
    opacity: 1; 
    transition: opacity .2s ease; 
} 
.price-option:last-child { margin-right: 0; } 

.pricing:hover .price-option { opacity: 0.6; } 
.pricing:hover .price-option:hover { opacity: 1; } 

.price-option__detail { 
    padding: 2em 0; 
    background: white; 
    text-align: center; 
} 
.price-option--low .price-option__detail { border-radius: .25em 0 0 0; } 
.price-option--mid .price-option__detail { padding: 2.3em 0; border-radius: .25em .25em 0 0; } 
.price-option--high .price-option__detail { border-radius: 0 .25em 0 0; } 

.price-option__cost, 
.price-option__type { 
    display: block; 
} 
.price-option__cost { 
    font-size: 1.5em; 
    color: #383838; 
} 
.price-option__type { 
    font-size: .7em; 
    text-transform: uppercase; 
    color: #909090; 
}  
.price-option__purchase { 
    position: relative; 
    display: block; 
    padding: .6em; 
    font-size: .875em; 
    font-weight: bold; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: rgba(0,0,0,0.6); 
}  
.price-option--low .price-option__purchase { background: #a7d155; border-radius: 0 0 0 .25em; } 
.price-option--mid .price-option__purchase { background: #eada42; border-radius: 0 0 .25em .25em; } 
.price-option--high .price-option__purchase { background: #e54e4b; border-radius: 0 0 .25em 0; } 
.price-option__purchase:before { 
    content: ''; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left: -5px; 
    border-width: 0 5px 5px; 
    border-style: solid; 
} 

Любая помощь приветствуется

Answer 1

Одним из решений является использование псевдо-элемент :before:

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100% 
 
} 
 
body { 
 
    background: #454c4f; 
 
    font: 1em/1.5'Droid Sans', sans-serif; 
 
} 
 
.pricing { 
 
    @include translate(-49%, -49.1%); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 310px; 
 
    font-size: 0; 
 
    opacity: 1; 
 
    transition: opacity .2s ease; 
 
} 
 
.price-option { 
 
    display: inline-block; 
 
    width: 6.25em; 
 
    vertical-align: middle; 
 
    margin-right: 0.3125em; 
 
    font-size: 16px; 
 
    opacity: 1; 
 
    transition: opacity .2s ease; 
 
} 
 
.price-option:before { 
 
    content: ""; 
 
    background-image: url(http://placehold.it/50x50); 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 50px; 
 
    top: -25px; 
 
    margin-left: 25px; 
 
} 
 
.price-option:last-child { 
 
    margin-right: 0; 
 
} 
 
.pricing:hover .price-option { 
 
    opacity: 0.6; 
 
} 
 
.pricing:hover .price-option:hover { 
 
    opacity: 1; 
 
} 
 
.price-option__detail { 
 
    padding: 2em 0; 
 
    background: white; 
 
    text-align: center; 
 
} 
 
.price-option--low .price-option__detail { 
 
    border-radius: .25em 0 0 0; 
 
} 
 
.price-option--mid .price-option__detail { 
 
    padding: 2.3em 0; 
 
    border-radius: .25em .25em 0 0; 
 
} 
 
.price-option--high .price-option__detail { 
 
    border-radius: 0 .25em 0 0; 
 
} 
 
.price-option__cost, 
 
.price-option__type { 
 
    display: block; 
 
} 
 
.price-option__cost { 
 
    font-size: 1.5em; 
 
    color: #383838; 
 
} 
 
.price-option__type { 
 
    font-size: .7em; 
 
    text-transform: uppercase; 
 
    color: #909090; 
 
} 
 
.price-option__purchase { 
 
    position: relative; 
 
    display: block; 
 
    padding: .6em; 
 
    font-size: .875em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: rgba(0, 0, 0, 0.6); 
 
} 
 
.price-option--low .price-option__purchase { 
 
    background: #a7d155; 
 
    border-radius: 0 0 0 .25em; 
 
} 
 
.price-option--mid .price-option__purchase { 
 
    background: #eada42; 
 
    border-radius: 0 0 .25em .25em; 
 
} 
 
.price-option--high .price-option__purchase { 
 
    background: #e54e4b; 
 
    border-radius: 0 0 .25em 0; 
 
} 
 
.price-option__purchase:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: -5px; 
 
    border-width: 0 5px 5px; 
 
    border-style: solid; 
 
} 
 
.price-option--low .price-option__purchase:before { 
 
    border-color: transparent transparent #a7d155; 
 
} 
 
.price-option--mid .price-option__purchase:before { 
 
    border-color: transparent transparent #eada42; 
 
} 
 
.price-option--high .price-option__purchase:before { 
 
    border-color: transparent transparent #e54e4b; 
 
}

<div class="pricing"> 
 
    <div class="price-option price-option--low"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$0</span> 
 
     <span class="price-option__type">Freeuser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Get</a> 
 
    </div> 
 
    <div class="price-option price-option--mid"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$20</span> 
 
     <span class="price-option__type">Poweruser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Buy</a> 
 
    </div> 
 
    <div class="price-option price-option--high"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$40</span> 
 
     <span class="price-option__type">Superuser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Buy</a> 
 
    </div> 
 
</div>

Answer 2

Вы можете добавить изображение в контейнер и поместите его абсолютно, например

<div class="price-option price-option--mid"> 
    <img class="top_image" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Banana-icon.png"/> 
    <div class="price-option__detail"> 
     <span class="price-option__cost">$20</span> 
     <span class="price-option__type">Poweruser</span> 
    </div> 
    <a href="#" class="price-option__purchase">Buy</a> 
</div> 

.top_image { 
    position:absolute; 
    top:-60px; 
} 

http://codepen.io/anon/pen/YPwJXa