Efekat rotirajuće slike - TIP 1
tekoms-doo

Brzina - pouzdanost - kvalitet

Efekat rotirajuće slike - TIP 1

English

tekoms-web-dizajn

 

Nazad

 

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