Как сделать кнопку поверх картинки?

503
03 июня 2017, 16:29

Есть галерея из картинок типа:

<img src="image.jpg" class="img" width="250" height="250">

Что можно придумать на js или css для того, чтобы при наведении мышки на изображение по центру появлялась другая картинка размерами, допустим 50х50px, как на некоторых сайтах при наведении мыши на картинку, в центре появляется кнопка зума (увеличения)...

Причем так должно работать на всех картинках галереи, и при появлении этой кнопки картинка не должна пропадать или размазываться (это я сейчас про visible, hidden или же opacity), картинка должна затемняться через rgba(), а по центру кнопка (маленькая картинка типа зума).

Как мне это сделать?

Answer 1

Засуньте маленькую картинку в псевдоэлемент обертки и показывайте при наведении (если нужно при наведении) или сразу же.

.zoomable-pic { 
  padding: 0; 
  border: 0; 
  background: none; 
  position: relative; 
} 
 
.zoomable-pic:after { 
  position: absolute; 
  content: ' '; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  margin: auto; 
  background: url(http://placeimg.com/50/50); 
  opacity: 0; 
  width: 50px; 
  height: 50px; 
  transition: opacity .2s; 
} 
 
.zoomable-pic:hover:after { 
  opacity: 1; 
} 
 
.zoomable-pic__image { 
  display: block; 
}
<button class="zoomable-pic"> 
  <img class="zoomable-pic__image" src="http://placeimg.com/200/200" /> 
</button>

READ ALSO
Кто может подсказать, как можно это сделать не используя картинку?
CSS

Кто может подсказать, как можно это сделать не используя картинку?

 387
Doctrine 1.2, автоматическое обрезание для полей в таблице
MySQL

Doctrine 1.2, автоматическое обрезание для полей в таблице

Использую Doctrine 12 При изменении/добавлении записи получаю исключение

 363
Лишняя строка при обращении к БД
MySQL

Лишняя строка при обращении к БД

Всем доброго времениСуть вопроса такова : есть 2 таблицы - первая: Куплено и вторая: Продано

 319
Помогит разобратся с синтаксисом RedBeanPhp
MySQL

Помогит разобратся с синтаксисом RedBeanPhp

Вот то как я сделал запрос,но он не верный $posts = R::findAll('news' , 'name LIKE ?', %array($data['seach'])%); Помогите понять где ставить знаки процентов

 263