0

Помогите, пожалуйста, найти откуда появляется белая обводка у рамки фотографии.

.thumbnail img {
  /*Параметры изображения-миниатюры*/
  border: 1px solid #FFFFFF;
  margin: 3px 3px 3px 2px;
  width: 100px;
  height: 100px;
}

.thumbnail:hover {
  /*Параметры изображения-миниатюры*/
  background-color: transparent;
}

.thumbnail span img {
  /*Параметры увеличенного изображения*/
  border-width: 0;
  padding: 2px;
  width: 575px;
  height: 384px;
}

.thumbnail span {
  /*Параметры увеличенного изображения*/
  position: absolute;
  background-color: #E6E6FA;
  padding: 5px;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail:hover span {
  /*Параметры увеличенного изображения*/
  visibility: visible;
  top: 0;
  left: 365px;
  /*Позиция увеличенного изображения*/
}
<a class="thumbnail" href="#thumb"><img src="https://via.placeholder.com/300x300" /><span><img src="https://via.placeholder.com/300x300" /><br />Летний этюд</span></a>

Белая рамка

6
  • Добавьте HTML
    – Arthur
    Commented 24 июн. 2018 в 20:48
  • вроде border нигде нет, откуда она взялась ума не приложу Commented 24 июн. 2018 в 20:57
  • Так Вы же сами написали border: 1px solid #FFFFFF; Commented 24 июн. 2018 в 20:57
  • здесь используется 2 картинки,у миниатюры должны быть, а у увеличенного не должна Commented 24 июн. 2018 в 20:58
  • .thumbnail img { /*Параметры изображения-миниатюры*/ border: 1px solid #FFFFFF; Commented 24 июн. 2018 в 20:58

4 ответа 4

3

у вас в стилях написано .thumbnail img. А это значит что вы задаете стили ВСЕМ img внутри thumbnail. Большая картинка тоже попадает под эти стили.

Сделайте стили именно по миниатюру - .thumbnail > img или для миниатюры отдельный класс

1
.thumbnail span {
  /*Параметры увеличенного изображения*/
  position: absolute;
  background-color: #E6E6FA; // это дает цвет рамки
  padding: 5px; //размер рамки

Обводки белой нет на этом примере

3
  • это цвет дает у всей рамки, это понятно, но там есть белая полоска, которую нигде не прописывал, вроде, как ее убрать? Commented 24 июн. 2018 в 21:02
  • Я на codepen залил пример. Нет там обводки белой.
    – dima hmel
    Commented 24 июн. 2018 в 21:06
  • Возможно браузер подставляет ее от миниатюры. Пропишите напрямую для увеличенного изображения border: none
    – dima hmel
    Commented 24 июн. 2018 в 21:07
1

Как я уже писал в комментах Вы сами указали border: 1px solid #FFFFFF; .Hover ничего не меняет

1
  • там как вы могли заметить по html коду, там 2 картинки используются, одна для миниатюры, другая для увеличенного изображения. У миниатюры есть рамка, я ее прописал, а вот у увеличенного изображения тоже появилась рамка, хотя там этого нет Commented 24 июн. 2018 в 21:04
1

Заккоментируйте background-color.

.thumbnail span{ /*Параметры увеличенного изображения*/ 
position: absolute; 
/*background-color: #E6E6FA;*/ 
padding: 5px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.