PORADNIK Jak zrobić ruchome obrazki kategorii?

Na szybko pokażę jak zrobić ruchome obrazki kategorii

W opisie kategorii wstawiamy:

Code:

<div class="cal">
<div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
</div>

Oczywiście podmieniając obrazki i linki na swoje.
Następnie we własnym stylu dodajemy:

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
  transform:rotate(50deg); -webkit-transform:rotate(50deg); 
-moz-transform:rotate(50deg); -o-transform:rotate(50deg); 
}
.cal {
width: 100%;
float:center;
margin:auto;
}

Obrazki po najechaniu będą się nam pochylały

Oczywiście to wersja bardzo prosta i można ją nieco urozmaicić

 

TheL czy można gdzieś zobaczyć ten efekt ?

 

zrób sobie plik html o treści:

Code:

<div class="cal">
<div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
<div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
</div>
<style>
.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
  transform:rotate(50deg); -webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg); -o-transform:rotate(50deg);
}
.cal {
width: 100%;
float:center;
margin:auto;
}
</style>

i uruchom go firefoxem to zobaczysz efekt

 

dzięki nice

 

Dobry bajer a co zmienić by zamiast obrotu w lewo było pomniejszenie lub powiększenie obrazka?

 

@TheL zajrzyj proszę tutaj do tematu, może w ramach wolnego czasu, będziesz mógł podać rozwiązanie hubertowi w ramach Twojego poradnika.

 

do powiększania będzie zmieniony styl:

Code:

.conta {
 float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

@Mariusz @TheL Dziękuję Wam bardzo!

 

jak tylko jakimś cudem znajdę chwilę to podam resztą efektów

 

Rozmycie:

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Przyciemnienie

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: brightness(0.4);
-moz-filter: brightness(0.4);
-o-filter: brightness(0.4);
-ms-filter: brightness(0.4);
filter: brightness(0.4);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Rozjaśnienie

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: brightness(1.7);
-moz-filter: brightness(1.7);
-o-filter: brightness(1.7);
-ms-filter: brightness(1.7);
filter: brightness(1.7);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Nasycenie

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: saturate(600%);
-moz-filter: saturate(600%);
-o-filter: saturate(600%);
-ms-filter: saturate(600%);
filter: saturate(600%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Odwrócenie barw

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Kontrast

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
-o-filter: contrast(200%);
-ms-filter: contrast(200%);
filter: contrast(200%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Negatyw

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Skala szarości

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

sepia

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Cień

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: drop-shadow(8px 8px 10px black);
-moz-filter: drop-shadow(8px 8px 10px black);
-o-filter: drop-shadow(8px 8px 10px black);
-ms-filter: drop-shadow(8px 8px 10px black);
filter: drop-shadow(8px 8px 10px black);
}
.cal {
width: 100%;
float:center;
margin:auto;
}

 

Przezroczystość

Code:

.conta {
  float:left;
  width:21%;
  padding:2%;
}
.conta:hover {
-webkit-filter: opacity(30%);
-moz-filter:  opacity(30%);
-o-filter:  opacity(30%);
-ms-filter:  opacity(30%);
filter:  opacity(30%);
}
.cal {
width: 100%;
float:center;
margin:auto;
}