Нареждане на картинки

[DobriMcConnor]

Здравейте,

Имам 4 картинки и искам да ги наредя в html файл, но някои от тези картинки трябва да се преплитат, ето какво имам предвид.

http://prikachi.com/images/532/6169532O.png

 

[Hous]

Някой от браузърите поддържат transform property на css3 но .... не ти препоръчвам.За какво са ти да се преплитат?

 

[DobriMcConnor]

Не точно да се преплитат, като пример мога да дам сайт - http://www.teamfortress.com/. Виж хедъра, искам да ги наредя по подобен начин.

 

[IvanAdamov]

z-index

http://www.w3schools.com/cssref/pr_pos_z-index.asp

 

[Hous]

Без да съм наблюдавал такъв ефект мога да предположа z-index.
Тоест нареждаш си ги с него една до друга картинките (дали със absolute position,далис със отрицателен margin ги слагаш една върху друга само краищата) , като слагаш на тези отгоре по-голям z-index и с jquery при mouseOver event примерно на дадената картинка да сменя z-indexa с по-голям...

$('#kartinka').mouseover(function () {
    $(this).css("z-index", "9")
});

$('#kartinka').mouseout(function () {
    $(this).css("z-index", "0")
});

примерно.



Вероятно има и по-лесен начин...

 

[deam0n]

Без да съм наблюдавал такъв ефект мога да предположа z-index.
Тоест нареждаш си ги с него една до друга картинките (дали със absolute position,далис със отрицателен margin ги слагаш една върху друга само краищата) , като слагаш на тези отгоре по-голям z-index и с jquery при mouseOver event примерно на дадената картинка да сменя z-indexa с по-голям...

$('#kartinka').mouseover(function () {
    $(this).css("z-index", "9")
});

$('#kartinka').mouseout(function () {
    $(this).css("z-index", "0")
});

примерно.



Вероятно има и по-лесен начин...

Ефекта при ховър не е такъв : ) Но евентуално този ефект дето си дал даже може по-добре да се получи с него.

 

[DobriMcConnor]

Благодаря ! Hous +1