Jump to content

sergey-starostenko

Newbie
  • Posts

    7
  • Joined

  • Last visited

Everything posted by sergey-starostenko

  1. Доброе врем суток! Столкнулся с такой проблемой. При переходе на новую строку, идет наложение картинки на картинку. Картинка кстати, при наведении меняется на другу. Код кину ниже. Как видно, вверху картинки ложатся друг на друга. Пытался сделать все что в голову пришло, ничего не получилось. А вот что нужно сделать: <!DOCTYPE html Version-1.0><html> <head> <title>Сотрудники</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style-employees.css"> <link rel="stylesheet" type="text/css" href="style-media-screen.css"> </head> <body> <div class="Employees-Box-Block"> <div class="Employees-Box-Block-Img"> <img class="Employees-Box-Block-Img-First" src="img/Josh.jpg" /> <img class="Employees-Box-Block-Img-Second" src="img/Josh_Hover.jpg" /> </div> </div> <div class="Employees-Box-Block"> <div class="Employees-Box-Block-Img"> <img class="Employees-Box-Block-Img-First" src="img/Josh.jpg" /> <img class="Employees-Box-Block-Img-Second" src="img/Josh_Hover.jpg" /> </div> </div> <div class="Employees-Box-Block"> <div class="Employees-Box-Block-Img"> <img class="Employees-Box-Block-Img-First" src="img/Josh.jpg" /> <img class="Employees-Box-Block-Img-Second" src="img/Josh_Hover.jpg" /> </div> </div> </body></html>* { margin: 0; padding: 0;}body { width: 100%;}.Employees-Box-Block { position: relative; width: 33.3%; float: left;}.Employees-Box-Block-Img { margin: 10px; position: relative;}.Employees-Box-Block-Img>img { width: 100%; position: absolute; display: block; top: 0; left: 0;}.Employees-Box-Block-Img>img.Employees-Box-Block-Img-First { opacity:0; filter:alpha(opacity=0);}.Employees-Box-Block-Img:hover img.Employees-Box-Block-Img-First { opacity:1; filter:alpha(opacity=100);}.Employees-Box-Block-Img:hover img.Employees-Box-Block-Img-Second, .Employees-Box-Block-Img>img.Employees-Box-Block-Img-Second:hover { opacity:0; filter:alpha(opacity=0);}.Employees-Box-Block-Img>img { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}Прошу помочь кто чем может) Спасибо за внимание.
  2. Спасибо всем ОГРОМНОЕ!!! Все получается. Еще раз - СПАСИБО ВСЕМ))
  3. прошу меня простить, если что то не так. Но я добавил картинку (<div class="img1"><img src="b-img1.jpg"><div class="text">text</div></div>), поэкспериментировал с ее шириной, ничего не получилось. Вот картинка - http://cs623421.vk.me/v623421890/1e08e/yUDYGfREBTc.jpg. Если можете помочь, буду очень признателен.
  4. Вот код: а вот результат: Черный блок, который находится выше красного предназначен именно для всего этого. А получается, что все эти div располагаются поверх всего. http://jsfiddle.net/23r802rm/
  5. это я все знаю, но я пробовал такой вариант, получилось что div с картинкой изменяется как надо. а div с текстом, независимо от div с картинкой, сам по себе и вообще бред получается
  6. Проблема в том, что высота div с текстом должна автоматически изменятся, так же как и высота картинки в div img.
  7. Доброе время суток! Нашел в инете такую идею реализации блоков. Пытался ее реализовать 2 дня, не все получается, что хочется. Можете помочь кодом? Дело в том, что она еще и резиновая. Спасибо большое.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy