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

Question

[Jony1337]

Привет всем
есть такая фишка на сайте когда человек нажимает на картинку она увеличивается вот полный код

<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;
}

как сделать чтобы при нажать на кнопку допустим которая немного выше открывалась картинка в полном размере ?

Answer 1

[Dark Hole]

Увы, никак без JS

Answer 2

[Карина]

не думаю, что тебе нужна эта вся простыня.
Используй уже готовое решение.
fancyapps.com/fancybox

Comments

[Dark Hole]

Он только на HTML + CSS хочет

[Карина]

Dark Hole: мне тоже кажется, что никак без js. Даже, если без jquery, то каким образом отследить событие нажатия на картинку? По-любас, - нужен js

[Jony1337]

iKapex: так дайте пример или решение на js

[Милок Мурлыка]

iKapex: Dark Hole:
codepen.io/anon/pen/pyQVXR

[Dark Hole]

Милок Мурлыка: это, что называется, костыли

[Милок Мурлыка]

Dark Hole: никто не спорит. Вы говорили что без js никак. Но с костылями можно.

Answer 3

[Милок Мурлыка]

С кнопкой наверное не получиться, а вот span'ом или текстом легко! Оберни текст/спан <label for="pic01"></label>. Span если что можно стилизовать как кнопку..

Comments

[Jony1337]

Function ? так не работает