Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

.ukazka {
    display: block;
}

.radek1 {
    display: block;
  text-align: left;
}

.radek2 {
    display: block;
  text-align: left;
}

.sloupec1 {
    background: url("http://special.8u.cz/1.png") white;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
    width: 50%;
  height:  50%;
  float: left;
}

.sloupec2 {
    background: url("http://special.8u.cz/2.png") white;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
    width: 50%;
  height:  50%;
  float: left;
}

.sloupec3 {
    background: url("http://special.8u.cz/3.png") white;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
    width: 50%;
  height:  50%;
  float: left;
}

.sloupec4 {
    background: url("http://special.8u.cz/4.png") white;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
    width: 50%;
  height:  50%;
  float: left;
}

.sloupec1:hover {background: url("http://special.8u.cz/1.png") #00bfff;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
  float: left;}
.sloupec2:hover {background: url("http://special.8u.cz/2.png") #00bfff;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
  float: left;}
.sloupec3:hover {background: url("http://special.8u.cz/3.png") #00bfff;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
  float: left;}
.sloupec4:hover {background: url("http://special.8u.cz/4.png") #00bfff;
  background-position: center;
  background-size:  50% auto;
  background-repeat:  no-repeat;
  float: left;}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS