Galeria

Galeria

by jfcandidofilho

HTML

<h1>Gallery</h1>

<div class="main-container">
    <div class="main wrapper clearfix">
        <div id="gallery-work">
            <div id="gallery-warper">
                <div class="img-container">
                    <img src="http://goo.gl/P7An0J" alt="1" />
                </div>
                <div class="img-container">
                    <img src="http://goo.gl/IgIBZf" alt="2" />
                </div>
                <div class="img-container">
                    <img src="http://goo.gl/XU3elh" alt="3" />
                </div>
                <div class="img-container">
                    <img src="http://goo.gl/KU8jlI" alt="4" />
                </div>
            </div>
            <!-- #gallery-warper -->
        </div>
        <!-- #gallery-work -->
    </div>
    <!-- #main -->
</div>
<!-- #main-container -->

CSS

.img-container {
    width: 100px;
    display: inline-block;
    margin: 0.6% 0.4%;
    opacity: 1;
    background-color: black;
}
.img-container img {
    width: 100px;
    opacity: 0.5;
}
.img-container img:hover {
    opacity: 1;
}

JavaScript

var container = document.getElementById('gallery-warper');
var divs = container.getElementsByTagName('div');
var imagens = container.getElementsByTagName('img');


for (var i = 0; i < divs.length; i++) {
    imagens[i].onclick = function (divs) {
        this.style.opacity = "1";
        this.style.width = this.naturalWidth + "px";
    };
}