CSS3 zoom efekt obrázku v pozadí

Provést "zoom efekt" přímo na tag "img" je prosté, protože tím neovlivníte žádné další třídy (maximálně si musíte pohlídat obalovací div obrázku, aby měl "overflow: hidden;").

Pokud ovšem máte obrázek v pozadí ("background-image"), tak zoom na daný blok zvětší jak obrázek v pozadí, tak i veškerý další obsah bloku (tudíž si zvětšíte i veškeré fonty, bloky atd..). Z tohoto důvodu je třeba myslet i na HTML část a udělat daný obrázek v pozadí jako nezávislý blok.

//HTML cast

  
    
  
 

// CSS cast
.polozka_kategorie_home{
  position: relative;
  float: left;
  width: 50%;
  overflow: hidden;
}
.polozka_kategorie_home_in{
  position: relative;
  display: block;
  height: 650px;
  line-height: 650px;
  background-color: #DADADA;
  text-align: center;
  overflow: hidden;

  background-position: center center;
  background-repeat: no-repeat;
}
.polozka_kategorie_home_in_in{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;

  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.obrazek_kategorie_1{
  background-image: url("../../img/home/obrazek_kategorie_1.jpg");
}
.obrazek_kategorie_2{
  background-image: url("../../img/home/obrazek_kategorie_2.jpg");
}
.obrazek_kategorie_3{
  background-image: url("../../img/home/obrazek_kategorie_3.jpg");
}

.polozka_kategorie_home:hover .polozka_kategorie_home_in_in, 
.polozka_kategorie_home:focus .polozka_kategorie_home_in_in {
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

<< zpět