Powiększający się obrazek po najechaniu CSS

morawiec

2015-04-15 20:02

Cześć chciałbym na jednej ze stron zastosować taki efekt poniżej w linku jest kod:
http://jsfiddle.net/sv4ppf51/1/
Jak przerobić ten kod żeby działał w Q.cms Spróbowałem wrzucić takie coś do css'a:

/* IMAGES STYLES */
/* global */

#content li img {

-webkit-transform: scale(1, 1);
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;

-moz-transform: scale(1, 1);
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-out;


-ms-transform: scale(1, 1);
-ms-transition-duration: 500ms;
-ms-transition-timing-function: ease-out;
}
#content li img:hover {
-webkit-transform: scale(1.1, 1.1);
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;

-moz-transform: scale(1.1, 1.1);
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-out;

-ms-transform: scale(1.10, 1.10);
-ms-transition-duration: 500ms;
-ms-transition-timing-function: ease-out;
}

/* list global */
.kontener {
width: 620px;
height: 600px;
background-color: #CC0000;
overflow:hidden;

A w kodzie strony wpisałem:
<div class="kontener"><img src="http://ukladsloneczny7.republika.pl/ziemia/ziemia3.jpg" /></div>

Niestety nie działa, proszę o pomoc i pozdrawiam :)

» Quick.Cart v6.x

Tomek

openzibi

2015-04-15 20:36

Zamień
/* FILES LIST STYLES */

na
img {
......

}

.kontener {
......
}

/* FILES LIST STYLES */

i gotowe :)

Miniaturki zdjęć produktów na liście produktów i w pełnym opisie będą miały efekt powiększania.

StudioStrona.pl

openzibi

2015-04-15 20:50

@morawiec i wszyscy pytający :)
Przy zadawaniu pytania sugeruję dokładne podawanie typu skryptu.
Wybrałeś Quick.Cart v6.x ale w pytaniu wspomniałeś również o Quick.CMS.

StudioStrona.pl

morawiec

2015-04-16 07:42

Dzięki działa, przez pomyłkę wybrałem quick cart chodziło o quick cms. Jeszcze jedno pytanie teraz w ten sposób zachowują się wszystkie obrazki na stronie łącznie z banerem jak tą funkcjonalność ograniczyć tylko do jednej strony wyłączając baner?

Tomek

artek

2015-04-17 13:48

Załóż nowy szablon który wybierzesz w zakładce "Zaawansowane" w edycji dla wybranej podstrony.
W nowym pliku nagłówka podlinkuj nową kopię pliku ze stylami w którym zmień tylko ten fragment dotyczący powiększanych obrazków.