html css trikovi efekat rotirajuce slike tip 1


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 10 - Efekat rotirajuće slike - TIP 1


Nazad


Efekat rotirajuće slike - TIP 1


Efekat rotirajuće slike veoma jednostavno preko stilova definiše da slika u div tagu klase "efekat-slika" ima blagu rotaciju prelaskom miša preko slike. Preko stilova možete podešavati svojstva kao što su dimenzije div taga, boja fonta itd. Div tag je kompletno linkovan tako da prelaskom miša preko div taga, pored pozivanja hover efekta rotacije slike, kursor daje oznaku linka.

Head


<style type="text/css">
.efekat-slika {
  font-family: Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 250px;
  max-width: 310px;
  width: 100%;
  color: #FFF;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.efekat-slika * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.efekat-slika img {
  max-width: 100%;
  vertical-align: top;
}
.efekat-slika figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.efekat-slika h3 {
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 3px 0;
}
.efekat-slika .title1 {
  font-weight: 700;
}
.efekat-slika .title2 {
  color: #a58e7c;
  font-weight: 300;
}
.efekat-slika .title3 {
  font-weight: 700;
  font-size: 25px;
}
.efekat-slika a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.efekat-slika:hover img,
.efekat-slika.hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}
</style>

Body


<figure class="efekat-slika"><img src="images/online-obuka.jpg" />
  <figcaption>
    <h3 class="title3">Ovde</h3>
    <h3 class="title2">ide</h3>
 <h3 class="title1">naslov</h3>
  </figcaption><a href="#"></a>
</figure>

Prikaz u Browser-u


Ovde

ide

naslov

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke