Web dizajn primeri

TEKST PREKO SLIKE + ANIMACIJA

Primer 1

1. HTML kod se formira od div taga koji funkcioniše kao kontejner i sadrži img tag za prikaz slike i p tag za tekst.

<div class="box1">
  <img src="slike/morexl.jpg" alt="MIrtos plaža, Kefalonija">
  <p>Pogled na plažu Mirtos,
  <br>jednu od najlepših plaža Kefalonije. </p>
</div> }

2. Za div tag/kontejner se precizira širina što će uticati na širinu slike i teksta i osobina position se postavlja na relativ. Relative postion div taga omogućuje da se unutar njega, tekst pozicionira na određenim koordinatama upotrebom apsolutnog pozicioniranja.

.box1{
  position: relative;
  width:500px;
  padding: 0px;
  margin: 0px;
}

3. Za tekst osobina bottom je postavljena na 0 tako da se prikazuje u donjem delu div taga. Visinu div taga određuje visina slike. Tekstu je definisana transparentna pozadina upotrebom rgba definicje za boju pozadine.

.box1 p {
  position: absolute;
  bottom:0px;
  width: 100%;
  background-color: rgba(70,70,90,0.6);
  color:white;
  letter-spacing: 2px;
  font-size: 20px;
  text-align: center;
  margin: 0px;
  padding: 5px;
}

4. Širina slike je 100%, što znači da će biti ista kao širina div taga koji je sadrži, a visina će se proporcionalno automatski odrediti, što će uticati i na visinu div/kontejnera i poziciju teksta.

.box1 img{
  width: 100%;
  height: auto;
  margin: 0px;
  vertical-align: middle;
}

Test koda

Primer 2

Pređite mišem preko slike za prikaz teksta.

1. Za razliku od prvog primera, ovde je u kontejner smešten još jedan div tag.

<div class="box2">
  <img src="slike/morexl.jpg" alt="MIrtos plaža, Kefalonija">
  <div class="pozadina">
    <p>Pogled na plažu Mirtos,
    <br>jednu od najlepših plaža Kefalonije. </p>
 </div> </div>

2. Dodati div tag ima transparentu pozadinu i prekriva celu sliku. Potpuno je nevidljiv, zbog podešavanja osobine opacity na 0. Animirano pojavljivanje natpisa je postignuto dodatkom tranzicije, koja osobinu opacity menja postepeno.

.box2 .pozadina{
  position: absolute;
  bottom:0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,80,0.4);
  opacity: 0;
  transition: 1s ease;
}

3. Pozcija teksta je postavljena na sredini kontejenra.

.box2 p{
  position: absolute;
  color:white;
  width: 100%;
  letter-spacing: 2px;
  font-size: 20px;
  text-align: center;
  top: 45%;
  transform: translate(0%, -50%);
}

4. Animacija i pojavljivanje teksta se dešavaju kada se mišem pređe preko kontejnera

.box2:hover .pozadina {
  opacity: 1;
}

Test koda