Css Image Zoom

If you are going to place your image gallery  inserting a command{ display: Inline-block} into related style sheet then defiantly your desire will be to present them some kind of  image zoom. With two lines of code like image class scaling the result can be  displayed. Download the css image zoom zip files here.

Scale Without Pixel Effects

<div style="width:200px; height:200px;  display: inline-block;">
<a href="#"><img class="enlarge" src="img/1.jpg" title=""></a>
</div>

Scale  With Pixel Effects

<div style="width:200px; height:200px; display: inline-block;">
<a href="#"><img class="enlarge" src="img/1c.jpg" width="200px" title=""></a>
</div>

Css For Both

.enlarge:hover {
transform:scale(1.5,1.5);
transform-origin:-50 -50;
/* Optional */
-webkit-box-shadow: 1px 1px 4px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 4px 3px rgba(0,0,0,0.75);
box-shadow: 1px 1px 4px 3px rgba(0,0,0,0.75);

}

 

Css Image Flip

There is an another way to flip images using Css.with a hover effect a 360 degree rotation is made by transformation .Css image flip is more easy than compare to JavaScript image flip.An Image gallery with more image option because of its flip container is so helpful.

Copy & Paste that code into your Style Sheet.

.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 190px;
    height: 145px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Download Css_Flip Files