Di Klik Membesar

by RzaaL1306

HTML

<div class="block">
<ul class="centered">
    <li id="satu"><a href="#satu"><img src="http://placehold.it/150x200"></a></li>
    <li id="dua"><a href="#dua"><img src="http://placehold.it/150x200"></a></li>
    <li id="tiga"><a href="#tiga"><img src="http://placehold.it/150x200"></a></li>
</ul>
</div>

CSS

html, body {
    height: 100%;
}

.block {
  text-align: center;
  height: 100%;
}
 
.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
 
.centered {
  display: inline-block;
  vertical-align: middle;
}

ul {
    overflow: hidden;
    vertical-align: middle;
}

li {
    position: relative;
    width: 75px;
    height: 100px;
    -webkit-transition: .3s ease;
    opacity: .7;
    display: inline-block;
    margin: 0 12px;
    vertical-align: middle;
}
li img {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}
li:target, li:target img {
    width: 150px;
    height: 200px;
    opacity: 1;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}