html css trikovi efekat rotirajuce slike tip 2


Akcija traje do 01.08.2019 - Besplatni online kurs web dizajna

Nastavna jedinica: Trick 11 - Efekat rotirajuće slike - TIP 2


Nazad


Efekat rotirajuće slike - TIP 2


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-slike {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 10px 1%;
  max-width: 310px;
  min-width: 250px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.efekat-slike * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.efekat-slike img {
  max-width: 100%;
  vertical-align: top;
  position: relative;
}

.efekat-slike figcaption {
  padding: 25px 20px 25px;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.efekat-slike figcaption:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #084475;
  content: '';
  background: -moz-linear-gradient(90deg, #084475 0%, #28c2ff 100%, #28c2ff 100%);
  background: -webkit-linear-gradient(90deg, #084475 0%, #28c2ff 100%, #28c2ff 100%);
  background: linear-gradient(90deg, #084475 0%, #28c2ff 100%, #28c2ff 100%);
  opacity: 0.8;
  z-index: -1;
}

.efekat-slike .date {
  background-color: #fff;
  border-radius: 50%;
  color: #084475;
  font-size: 18px;
  font-weight: 700;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 0;
  position: absolute;
  right: 15px;
  text-align: center;
  top: -25px;
}

.efekat-slike .date span {
  display: block;
  line-height: 14px;
}

.efekat-slike .date .month {
  font-size: 11px;
}

.efekat-slike h3,
.efekat-slike p {
  margin: 0;
  padding: 0;
}

.efekat-slike h3 {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}

.efekat-slike p {
  font-size: 0.8em;
  line-height: 1.6em;
  margin-bottom: 0px;
}

.efekat-slike a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

.efekat-slike:hover img,
.efekat-slike.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

Body


<figure class="efekat-slike">
  <div class="image"><img src="images/online-obuka.jpg" /></div>
  <figcaption>
    <div class="date"><span class="day">60</span><span class="cena">eur</span></div>
    <h3>NASLOV</h3>
    <p> Ovde ide neki tekst ... Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ... </p>
  </figcaption>
  <a href="#"></a>
</figure>

Prikaz u Browser-u


60eur

NASLOV

Ovde ide neki tekst ... Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...

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