@Jony1337

Как выполнить действие при нажатии на кнопку в html + css?

Привет всем
есть такая фишка на сайте когда человек нажимает на картинку она увеличивается вот полный код
<table align="center">

  <tr>
    <td align="center"
      <div class="image"><input id="pic01" type="checkbox"><label for="pic01" style="background-image: url('http://site.ru/app/images/function.jpg');"></label></div>
</table>

CSS код
body {
  position: relative;
  line-height: 0;
}

.container {
  width: calc(100% - 2em);
  padding: 1em;
}
.tile {
  width: 100%;
  height: 100%;
  background-color: #dfa;
  margin-bottom: 1em;
}
.info {
  display: inline-block;
  line-height: 1em;
  width: calc(100% - 160px - 160px);
  vertical-align: top;
}
.info p {
  font-weight: 600;
}
.info li {
  color: #888;
  text-indent: 1em;
}
.pics {
  display: inline-block;
  background-color: #000;
}
.image {
  display: inline-block;
  width: 160px;
  height: 120px;
}
input[type="checkbox"] {
  display: none;
}
input + label {
  display: block;
  width: 160px;
  height: 120px;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  background-image: url('http://lorempixel.com/800/600');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
/*  transition: .4s;
*/
}
input:checked + label {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;

/*  transform: translate(calc(2em + 160px - 100vw), calc(0px - 120px - 2em));
*/
  background-color: rgba(10,10,10,.9);
  background-size: auto;
  z-index: 99999;
}

как сделать чтобы при нажать на кнопку допустим которая немного выше открывалась картинка в полном размере ?
  • Вопрос задан
  • 2440 просмотров
Решения вопроса 3
abyrkov
@abyrkov
JavaScripter
Увы, никак без JS
Ответ написан
Комментировать
iKapex
@iKapex
не думаю, что тебе нужна эта вся простыня.
Используй уже готовое решение.
fancyapps.com/fancybox
Ответ написан
milokmurlika
@milokmurlika
Няшка
С кнопкой наверное не получиться, а вот span'ом или текстом легко! Оберни текст/спан <label for="pic01"></label>. Span если что можно стилизовать как кнопку..
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы