Widodo

Caption Image Animation Zoom

Caption Images Animasi Zoom

s-widodo.com akan memberikan tutorial pembuatan galeri gambar denga efek animasi zoom dan hover caption   yang terdapat deskripsi kami mencoba hal yang berbeda yang dapat Anda lakukan dengan properti CSS . Dengan mask CSS, Anda dapat menutupi atau klip setiap elemen ke bentuk yang diinginkan. untuk membuat sebuah galeri gambar ini cukup simple dan tidak serumit yang kita bayangkan karena mekai full css3 dan no jQuery.

CSS

body { background:#1CBB9B}

.wrapper {margin:auto; width:880px; display:table}
h3 {font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:#ffffff; font-size:20px; text-align:center}
ul {
display: inline-block;
width: 97.1%;
height: auto;
padding: 0;
}

ul li {
display: inline-block;
list-style: none;
padding: 0;
margin: 50px 0 0;
}

 

img {
width: 100%;
}

figure {
margin: 0;
padding: 0;
height: 280px;
position: relative;
display: block;
cursor: pointer;
overflow: hidden;
border: 3px solid #fff;
}

figure:hover figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
opacity: 1;
top: 0;
}

figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,.5);
color: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
}

figure img { height:280px;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
-ms-transition: all 1.5s;
transition: all 1.5s;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
}

figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

figcaption h3 {
font-family:Arial, Helvetica, sans-serif;
font-weight: 400;
color: #f3b204;
padding: 10px 20px;
margin-bottom: 0;
position: relative;
righ: 100%;
margin-top: 37px;
font-size: 30px;
}

figcaption p {
font-family: Arial, Helvetica, sans-serif;
padding: 10px 20px;
margin-bottom: 0;
margin-top: 20px;
position: relative;
left: 100%;
font-size: 13px;
}

figure:hover h3,figure:hover p {
left: 0;
}

figcaption a {
color: #fff;
border: 2px solid #fff;
padding: 4px 10px;
text-decoration: none;
}

figcaption a:hover {
color: #4f5856;
background: #fff;
}

HTML

<div class="wrapper">
<h3>Caption Image Animation Zoom</h3>
<ul>
<li>
<figure>
<img src="itemgall.jpg" alt="images">
<figcaption>
<h3>Lorem ipsum title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p><a href="#">Read More</a></p>
</figcaption>
</figure>

</li>

<li>

<figure>
<img src="itemgall.jpg" alt="images">
<figcaption>
<h3>Lorem ipsum title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>

<p><a href="#">Read More</a></p>
</figcaption>
</figure>

</li>

<li>

<figure>
<img src="itemgall.jpg" alt="images">
<figcaption>
<h3>Lorem ipsum title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>

<p><a href="#">Read More</a></p>
</figcaption>
</figure>

</li>
<br style="clear: both;"/>
</ul>
</div>

Anda cukup menyalin kode diatas di halaman web anda..


Artikel Terkait

Caption Image Animation Zoom

22 Oktober 2015 0

0 Komentar