tekoms-doo

Efekat rotirajuće slike - TIP 2

English version

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-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 ...