Gambar dengan 10 jenis hover effect bahagian 2 ~ fitri1986

Gambar dengan 10 jenis hover effect bahagian 2

Demo di sini

Snapshot

Cara pemasangan

1.Login ke akaun blogger anda.
2.Klik Template --> Edit HTML.
3.Cari kod ]]></b:skin>
4.Copy dan paste kod pilihan style dibawah diatas kode ]]></b:skin> tersebut
5.Untuk mengaktifkan kod,letakkan kod html yang disediakan pada setiap kod style sama ada di pos atau guna HTML/javascript pada layout

Kod css style 6

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN29q80C3ejl1dwPa3DADYogrzLIGFeQqy3FZo5SlrbumXBGCX8axDiCaXE7_rx4U0blGQXMjVICW6BuMTKraUa98vY1u1Nl5eGDjaOxnDDW9rjvoLgEI9dQKpG7kuqU1owINIO7UUSU3a/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
background-color: rgba(146,96,91,0.5);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.4s;
-moz-transition: all 0.3s ease-in 0.4s;
-o-transition: all 0.3s ease-in 0.4s;
-ms-transition: all 0.3s ease-in 0.4s;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover img {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-sixth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

Kod html style 6

<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #6</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #6</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #6</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #6</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>

Kod css style 7

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN29q80C3ejl1dwPa3DADYogrzLIGFeQqy3FZo5SlrbumXBGCX8axDiCaXE7_rx4U0blGQXMjVICW6BuMTKraUa98vY1u1Nl5eGDjaOxnDDW9rjvoLgEI9dQKpG7kuqU1owINIO7UUSU3a/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.view-seventh img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh p {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view-seventh:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Kod html style 7

<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #7</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #7</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #7</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #7</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>

Kod css style 8

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN29q80C3ejl1dwPa3DADYogrzLIGFeQqy3FZo5SlrbumXBGCX8axDiCaXE7_rx4U0blGQXMjVICW6BuMTKraUa98vY1u1Nl5eGDjaOxnDDW9rjvoLgEI9dQKpG7kuqU1owINIO7UUSU3a/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
};
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

Kod html style 8

<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #8</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #8</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #8</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #8</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>

Kod css style 9

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN29q80C3ejl1dwPa3DADYogrzLIGFeQqy3FZo5SlrbumXBGCX8axDiCaXE7_rx4U0blGQXMjVICW6BuMTKraUa98vY1u1Nl5eGDjaOxnDDW9rjvoLgEI9dQKpG7kuqU1owINIO7UUSU3a/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-ninth .mask-1, .view-ninth .mask-2 {
background-color: rgba(0, 0, 0, 0.5);
height: 361px;
width: 361px;
background: rgba(119, 0, 36, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out 0.6s;
-moz-transition: all 0.3s ease-in-out 0.6s;
-o-transition: all 0.3s ease-in-out 0.6s;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0;
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
-o-transform: rotate(56.5deg) translateX(-180px);
-ms-transform: rotate(56.5deg) translateX(-180px);
transform: rotate(56.5deg) translateX(-180px);
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0;
-webkit-transform: rotate(56.5deg) translateX(180px);
-moz-transform: rotate(56.5deg) translateX(180px);
-o-transform: rotate(56.5deg) translateX(180px);
-ms-transform: rotate(56.5deg) translateX(180px);
transform: rotate(56.5deg) translateX(180px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.view-ninth .content {
background: rgba(0, 0, 0, 0.9);
height: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
width: 361px;
overflow: hidden;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: all 0.4s ease-in-out 0.3s;
-moz-transition: all 0.4s ease-in-out 0.3s;
-o-transition: all 0.4s ease-in-out 0.3s;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
display: none;
}
.view-ninth:hover .content {
height: 120px;
width: 250px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
top: 40px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
-webkit-transform: rotate(56.5deg) translateX(1px);
-moz-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
-webkit-transform: rotate(56.5deg) translateX(-1px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px);
}

Kod html stle 9

<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask mask-1">
</div>
<div class="mask mask-2">
</div>
<div class="content">
<h2>
Hover Style #9</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask mask-1">
</div>
<div class="mask mask-2">
</div>
<div class="content">
<h2>
Hover Style #9</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask mask-1">
</div>
<div class="mask mask-2">
</div>
<div class="content">
<h2>
Hover Style #9</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask mask-1">
</div>
<div class="mask mask-2">
</div>
<div class="content">
<h2>
Hover Style #9</h2>
<p>
Description here</p>
<a href="#" class="info">Read More</a>
</div>
</div>

Kod css style 10

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN29q80C3ejl1dwPa3DADYogrzLIGFeQqy3FZo5SlrbumXBGCX8axDiCaXE7_rx4U0blGQXMjVICW6BuMTKraUa98vY1u1Nl5eGDjaOxnDDW9rjvoLgEI9dQKpG7kuqU1owINIO7UUSU3a/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

Kod html style 10

<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #10</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #10</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #10</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKxRqxxHH8YBgpktuIFm0dooVwVDi1BToUdARWPo4_NM-acYFMxBtF0u5zaROHVJkZBLLA7f9SmseUwp21_DfkIv0REp5MjKhK6MzCIBffUCVODEdEMZ5MwPPR8VBk1I8g5huGv_v6z4V/s1600/How-to-clean-laptop.jpg" />
<div class="mask">
<h2>
Hover Style #10</h2>
<p>
Fitri1986</p>
<a href="http://fitri1986.blogspot.com" class="info">Read More</a>
</div>
</div>

fitri1986

Menu

About This Abandoned Blog

CHIT CHAT,SPAM,BLOGWALKING HERE

Click Ad To Support :).I want to buy burger....they are becoming really expensive recently.....

Senarai Blog Saya

Jom Buat Duit Online!!....Proceed at your own risk.........Even I`m not sure myself.......

Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

11 Oktober 2013

Gambar dengan 10 jenis hover effect bahagian 2

Post a Comment:

At the post page,this banner can be spin around ;)

Configure Labels