С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 14.09.2015
Сообщений: 20
1

Увеличение изображения

21.09.2015, 10:44. Показов 750. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Ребят, перелазил все, не нашел ответа, прошу Вашей помощи

Ситуация такова, делаю сайт доставки, в каждом окошке продукта имеется картинка которую не могу увеличить, не знаю в чем проблема, помогите

Прикрепляю скрин с хрома, не знаю достаточно инфы для Вас господа или нет
Миниатюры
Увеличение изображения  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.09.2015, 10:44
Ответы с готовыми решениями:

увеличение - уменьшение изображения
пример вот здесь - http://www.el-tuning.ru/index.html сделать средствами HTML

Увеличение изображения, hover
есть чтото вроде галереи, сверху меню миниатюр, снизу отображается выбраное изображение. при...

Увеличение изображения при наведении
Всем привет, очень нужна помощь. Я не силен в верстке, поэтому не критикуйте сильно. Есть блок с...

Плавное увеличение и уменьшение изображения
Вечер добрый, есть такой код: .entry-thumbnail:hover{ transform: scale(1.1); overflow:...

5
414 / 379 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
21.09.2015, 11:45 2
SLaiv,
1 выложите код
2 как вы ее увеличиваете?
0
0 / 0 / 0
Регистрация: 14.09.2015
Сообщений: 20
21.09.2015, 11:56  [ТС] 3
whiteapps, Пробовал через - width увеличивать не получается.

Код только тот что справа, или какой Вам нужен ?
0
6 / 6 / 3
Регистрация: 14.06.2015
Сообщений: 54
21.09.2015, 12:10 4
Вот допустим картинки:
HTML5
1
2
3
4
 <div class="gallery">
                 <a tabindex="1"><img src="pics/img1.jpg"></a>
                 <a tabindex="2"><img src="pics/img2.jpg"></a>
                 <a tabindex="3"><img src="pics/img3.jpg"></a><div>
потом в CSS прописываем:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*Gallery*/
  
  .gallery a img{    
    /* округления старт */
    -webkit-border-radius: 25px;
    -moz-border-radius:  25px;
    border-radius:  25px;
    /* округления конец */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transition: all 1.0s ease;
    /* transition конец */
    
    /* Тень старт */
    -webkit-box-shadow: 0px 2px 4px 1px #DFDFDF;
    -moz-box-shadow: 0px 2px 4px 1px #DFDFDF;
    box-shadow: 0px 2px 4px 1px #DFDFDF; 
    /* Тень конец */
    
    /* Прозрачнсоть старт */
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
    /* Прозрачнсоть конец */
    
    margin-right:5px;     /* Отступ справа */
    padding:10px; /* Внутренние отступы */
    display:inline-block; /* отображение */
    height:150px; /* Высота */
}
 
.gallery a img:hover{
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
 
.gallery a:focus img{
    position: relative;  /* Позиционирование */
    height:300px; /* Высота */
    cursor: pointer;    /* Вид курсора */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transition: all 1.0s ease;
    /* transition конец */
    
    /* Тень старт */
    -webkit-box-shadow: 0px 4px 4px 1px #DFDFDF;
    -moz-box-shadow: 0px 4px 4px 1px #DFDFDF;
    box-shadow: 0px 4px 4px 1px #DFDFDF;
    /* Тень конец */    
}
 
gallery a{
    outline:0; border:0;
}
0
0 / 0 / 0
Регистрация: 14.09.2015
Сообщений: 20
21.09.2015, 12:26  [ТС] 5
Я извиняюсь, я зеленоват в этом еще.
Вот отрезок кода который отвечает за перемещение.
CSS
1
2
3
4
.content .right div.menu_right div.element a.photo{
        position: absolute;
        top:13px;
        left: 13px;
0
0 / 0 / 0
Регистрация: 14.09.2015
Сообщений: 20
21.09.2015, 18:05  [ТС] 6
И еще ребят, нашел где изменить размер изображения, вот только в Style.css вообще нет упоминаний.

На скрине класс photo openwin, при редактирование через Хром, выдает только расположение самой картинки, ниже где - img, в этом же разделе можно изменить сам размер, но в стилях ничего нет, заранее извиняюсь если не понятно выразился
Миниатюры
Увеличение изображения  
0
21.09.2015, 18:05
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.09.2015, 18:05
Помогаю со студенческими работами здесь

Увеличение изображения при клике
Скажите пожалуйста как можно делать так чтоб при нажатие на изображение оно увеличилось вот так как...

увеличение изображения при наведении на ссылку
Как можно осуществить наложение маленькой картинки на спрайт, чтобы при наведении картинка, которая...

Увеличение изображения при наведении курсора
При наведении на фотографию, она увеличивается. &lt;div class=&quot;foto&quot;&gt;&lt;img width=&quot;250&quot;...

Увеличение изображения при нажатие на кнопку
Как сделать так, чтобы при нажатие на кнопку (button) изображение, которые находится рядом с этой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru