En. štítek

by Petr Haluza

HTML

<div id="param_eu_block">
  <div class="param_eu">
    <strong>Energetický štítek dle EU</strong>
    <div class="param_01" data-class1="C"> <span>Valivý odpor: C</span><br></div>
    <div class="param_02" data-class2="B"> <span>Záběr na mokru: B</span><br></div>
    <div class="param_03" data-class3="1"> <span>Hlučnost: 1</span></div>
    <div class="param_04"><span>71</span> dB</div>
   </div>
</div>

CSS

#param_eu_block { position: relative; width: 170px; height: 250px; padding: 2px; margin: 20px; border: 2px solid #099cdb; border-radius: 5px; }
.param_eu strong { display: none; text-align: center; margin: 5px 0 0 0;}
.param_01 span, .param_02 span, .param_03 span { display: none;}

.param_01, .param_02, .param_03 { background-repeat: no-repeat;}

.param_01 { position: absolute; top: 3px; left: 2px; width: 96px; height: 176px;}
[data-class1="A"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_a.png);}
[data-class1="B"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_b.png);}
[data-class1="C"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_c.png);}
[data-class1="D"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_d.png);}
[data-class1="E"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_e.png);}
[data-class1="F"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_f.png);}
[data-class1="G"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_01_g.png);}

.param_02 { position: absolute; top: 3px; left: 98px; width: 74px; height: 176px;}
[data-class2="A"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_a.png);}
[data-class2="B"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_b.png);}
[data-class2="C"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_c.png);}
[data-class2="D"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_d.png);}
[data-class2="E"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_e.png);}
[data-class2="F"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_f.png);}
[data-class2="G"] { background-image: url(http://creativeagency.cz/temp/eu/BG_eu_02_g.png);}

.param_03 { position: absolute; top: 178px; left: 2px; width: 96px; height: 74px;}
[data-class3="1"] { background-image:...