[CSS]element bring to front

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod dyžon 15. 4. 2014 18:43

zdravim,
prosim o radu ..
mam na strance tri image vedle sebe.
delam ve wysiwyg web builderu a kazdymu image nastavim v css3 animaci pri prejeti mysi zvetseni na trojnasobek.
problem mam v tom, ze kdyz prejedu treti vlozenej image,tak se zvetsi a prekryje image1 a2,
kdyz prejedu 2. image, tak se zvetsi nad 1. image,ale je pod 3. image
kdyz prejedu 1. vlozenej image, tak 2. a 3. jsou porad nad nim.
potreboval bych poradit, co dopsat do kodu k Image1:hover .. abych nastavil pozici image1 nad Image2 a image3
ted mam v css tohle:
Kód: Vybrat vše
#Image1:hover
{
   -webkit-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -moz-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -ms-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   -moz-transition: transform 500ms linear 0ms;
   -ms-transition: transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
}

jinak z-index je u image1: 18; image2: 19 a image3: 20 ...
poradite prosim nekdo ?? diky..
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod kanabis 15. 4. 2014 19:05

img:hover {
z-index: 9999;
}
PC(Win10): Intel i5-3750K 4,5Ghz, Noctua NH-D14, Asus P8Z77-M PRO, 16GB RAM, GTX 1070 Gaming X,Seasonic P-760, SSD Crucial M4 128GB, FD Define R4
NB(OSX): Macbook Pro retina early 2015, Intel i5 2,7Ghz, 8GB RAM, SSD 256GB
kanabis
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 16. 4. 2014 13:50

to jsem prave zkousel,ale nefunguje ...
Kód: Vybrat vše
#Image1:hover
{
   -webkit-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -moz-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -ms-transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   transform: rotate(0deg) scale(5.0,5.0) translate(70px,0px);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   -moz-transition: transform 500ms linear 0ms;
   -ms-transition: transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
   z-index: 9999;
}
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod gandor 16. 4. 2014 15:06

mas aj pomeneny position? Alebo mas stale position:static (defaultna hodnota). Lebo pri static-u sa z-index ignoruje (co btw. predstavuje presne to chovanie co si popisal - neskvorsie elementy su totiz prirodzene "vyssie")
gandor
Mírně pokročilý

Odeslat příspěvekod dyžon 16. 4. 2014 15:57

position mam nastaveny na absolute.
no prave, je jasny, ze to co pridam pozdeji je jasne nad vsim co uz tam je, ale ja bych potreboval prave aby pri tom prejeti mysi se nastavil jako nejvyssi element a prekryl vsechny ostatni...
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod gandor 16. 4. 2014 22:37

Tak som si len pre tu zabavu skusil urobit vlasnu verziu a ono to funguje podla predstav:
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <style>
    .animBox {width:200px;height:110px;text-align:center;padding-top:90px;position:absolute;font-weight:bold}     
    .first {background:red;left:10px}
    .second {background:green;left:220px}
    .third {background:blue;left:430px}
    .animBox:hover
    {
       -webkit-transform: rotate(0deg) scale(1.5,1.5) translate(0px,0px);
       -moz-transform: rotate(0deg) scale(1.5,1.5) translate(0px,0px);
       -ms-transform: rotate(0deg) scale(1.5,1.5) translate(0px,0px);
       transform: rotate(0deg) scale(1.5,1.5) translate(0px,0px);
       -webkit-transition: -webkit-transform 500ms linear 0ms;
       -moz-transition: transform 500ms linear 0ms;
       -ms-transition: transform 500ms linear 0ms;
       transition: transform 500ms linear 0ms;
       z-index: 9999;
    }
  </style>
  </head>
  <body>
    <div class="first animBox">First</div>
    <div class="second animBox">Second</div>
    <div class="third animBox">Third</div>
  </body>
</html>

Takze chyba bude pravdepodobne v prekryvani stylov alebo take nieco. Skus pozriet ake CSS sa aplykuju priamo cez nejake developer tools (firebug a pod)...
gandor
Mírně pokročilý

Odeslat příspěvekod dyžon 17. 4. 2014 13:31

hele a nemuze to byt tim, ze ty to mas v class a ja v id ??
udelal jsem jednoduchej priklad na ukazku jak mi to vygenerovalo
index.html:
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="blabla">
<link href="Untitled1.css" rel="stylesheet" type="text/css"> <!-- tady jsou jen h1 - h6 -->
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wb_Image1">
<img src="images/Bez-nazvu-1.jpg" id="Image1" alt=""></div>
<div id="wb_Image2">
<img src="images/Bez-nazvu-3.jpg" id="Image2" alt=""></div>
</body>
</html>

index.css:
Kód: Vybrat vše
body
{
   margin: 0;
   padding: 0;
   background-color: #FFFFFF;
   color: #000000;
}
#Image1
{
   border: 0px #000000 solid;
}
#Image1:hover
{
   -webkit-transform: rotate(0deg) scale(2,2);
   -moz-transform: rotate(0deg) scale(2,2);
   -ms-transform: rotate(0deg) scale(2,2);
   transform: rotate(0deg) scale(2,2);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   -moz-transition: transform 500ms linear 0ms;
   -ms-transition: transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
   z-index: 9999;  // tenhle radek jsem dopsal ja po vygenerovani
}
#Image2
{
   border: 0px #000000 solid;
}
#Image2:hover
{
   -webkit-transform: rotate(0deg) scale(2,2);
   -moz-transform: rotate(0deg) scale(2,2);
   -ms-transform: rotate(0deg) scale(2,2);
   transform: rotate(0deg) scale(2,2);
   -webkit-transition: -webkit-transform 500ms linear 0ms;
   -moz-transition: transform 500ms linear 0ms;
   -ms-transition: transform 500ms linear 0ms;
   transition: transform 500ms linear 0ms;
}
#wb_Image1
{
   position: absolute;
   left: 86px;
   top: 228px;
   width: 165px;
   height: 165px;
   z-index: 0;
}
#wb_Image2
{
   position: absolute;
   left: 309px;
   top: 223px;
   width: 189px;
   height: 189px;
   z-index: 1;
}
#Image1
{
   width: 165px;
   height: 165px;
}
#Image2
{
   width: 189px;
   height: 189px;
}

netusim ,kde je chyba, ale nefunguje to .. image1 se zvetsi,ale neprekryje image2 , kterej tam byl vlozenej po nem, takze ma vyssi z-index.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod gandor 17. 4. 2014 16:23

Tak bud ti "Untitled1.css" prepisuje styli, alebo pozuvas priesvitne obrazky a iba sa ti zda, ze to nefunguje. Inak to opisat neviem :) Lebo mne to tvoje funguje...
gandor
Mírně pokročilý

Odeslat příspěvekod dyžon 17. 4. 2014 16:54

tady je jeste teda to Untitled1.css .. je to jen o pismu, takze si myslim, ze v tom to neni ..
Kód: Vybrat vše
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
h1
{
   font-family: Arial;
   font-size: 32px;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h2
{
   font-family: Arial;
   font-size: 27px;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h3
{
   font-family: Arial;
   font-size: 24px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h4
{
   font-family: Arial;
   font-size: 21px;
   font-weight: normal;
   font-style: italic;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h5
{
   font-family: Arial;
   font-size: 19px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h6
{
   font-family: Arial;
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
.CustomStyle
{
   font-family: "Courier New";
   font-size: 16px;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   color: #000080;
   background-color: transparent;
}

prave me je taky divny,ze to nejede ... vsechno je spravne ...
strcil jsem to na svoje pokusny ftp .. pokusny stranky a ani tady to nejede ..
jsem zoufaly, .. nesnasim kdyz neco,co je dobre, nejede a musim s tim otravovat dalsi lidi..
kazdopadne diky za tvuj cas ... pokud by te neco napadlo,tak dej jeste prosim vedet ...
na to ftp jsem dal index.html, index.css, Untitled1.css a slozku images se dvema obrazkama .jpg, takze prusvitny urcite nejsou ..
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 22. 4. 2014 10:39

tak jsem se k tomu nakonec dokopal a po par pokusech a cumeni do kodu jsem na to prisel ..
ten z-index se generoval do Image1:hover, a stacilo ho vlozit do
wb_Image1.hover
takze problem vyresen, .. diky za spolupraci.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků