Code slow phim đẹp

Thứ Năm, 11 tháng 2, 2016

Đang đọc
Code slow phim đẹp
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Code slow phim đẹp

DEMO: https://codepen.io/Beohoavinh/full/vJLZpR/









<style>
.newest {
    float: left;
    width: 15.87%;
    height: auto;
    max-height: 350px;
    margin: 0.39%;
    position: relative;
    overflow: hidden;
    background: #F5F5F5;
    box-shadow: 1px 1px 0 #E6E6E6;
}
.newest img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id…33 0.3333 0.3333 0 0 0 0 0 1 0'></feColorMatrix></filter></svg>#grayscale");
    filter: gray;
    border: 3px solid #F5F5F5;
    width: 97.5%;
}
.newest figure figcaption {
    position: absolute;
    left: auto;
    width: 100%;
    height: 40px;
    bottom: -60px;
    padding: 10px 0;
    background: #00ADFF;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: bottom 0.2s ease;
    -moz-transition: bottom 0.2s ease-in-out;
    -ms-transition: bottom 0.2s ease-in-out;
    -o-transition: bottom 0.2s ease-in-out;
    transition: bottom 0.2s ease-in-out;
}
.newest figure figcaption a {
    padding-left: 10px;
    text-align: center;
    display: block;
    font-size: 12px;
    font-weight: bold;
}
#Main{display:block!important; float: left; width: 100%;}
.newest {float:left; width: 15.87%; height: auto; max-height: 350px;margin: 0.39%;position:relative;overflow:hidden;background: #F5F5F5;box-shadow: 1px 1px 0 #E6E6E6;}
.newest img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><fecolormatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'></feColorMatrix></filter></svg>#grayscale");
filter: gray;
border: 3px solid #F5F5F5;
width: 97.5%;
}
.newest img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
filter: none;
filter: none;
}
@media (max-width: 1200px) {
  .newest {width: 19.2%;}
}
@media (max-width: 1000px) {
  .newest {width: 24.2%;}
}
@media (max-width: 800px) {
  /*.newest {width: 31%;}*/
}
.newest figure {margin:0;}
.newest figure figcaption {position: absolute;left: auto;width: 100%;height: 40px;bottom: -60px;padding: 10px 0;background: #00ADFF;-webkit-font-smoothing: antialiased;-webkit-transition: bottom 0.2s ease;-moz-transition: bottom 0.2s ease-in-out;-ms-transition: bottom 0.2s ease-in-out;-o-transition: bottom 0.2s ease-in-out;transition: bottom 0.2s ease-in-out;}
.newest figure:hover figcaption {bottom: 0px;}
.newest figure figcaption a{padding-left:10px;text-align: center;display: block;font-size: 12px;font-weight: bold;}
</style>







<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("https://lh3.googleusercontent.com/-X1CSyHaa_3o/VC0YJaFQhrI/AAAAAAAAA68/eZut06NdzeU/s72-c-no/transformers-4-age-of-extinction-2014-full-hd.jpg","w270-h350-c","100%","100%","","Transformer 4 Age Of Extinction - Kỷ nguyên hủy diệt");
</script><img alt="Transformer 4 Age Of Extinction - Kỷ nguyên hủy diệt" height="100%" src="https://lh3.googleusercontent.com/-X1CSyHaa_3o/VC0YJaFQhrI/AAAAAAAAA68/eZut06NdzeU/w270-h350-c-no/transformers-4-age-of-extinction-2014-full-hd.jpg" title="Transformer 4 Age Of Extinction - Kỷ nguyên hủy diệt" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/10/transformer-4-age-of-extinction-ky.html">Transformer 4 Age Of Extinction - Kỷ nguyên hủy diệt</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://3.bp.blogspot.com/-uVhSyDzufxs/UtRtCipa2PI/AAAAAAAAA6c/PUzEiEu1PFU/s72-c-no/phim-bang-dang-an-do.jpg","w270-h350-c","100%","100%","","Băng Đảng Ấn Độ - Gangs of Wasseypur (2012 | 320)");
</script><img alt="Băng Đảng Ấn Độ - Gangs of Wasseypur (2012 | 320)" src="http://3.bp.blogspot.com/-uVhSyDzufxs/UtRtCipa2PI/AAAAAAAAA6c/PUzEiEu1PFU/w270-h350-c-no/phim-bang-dang-an-do.jpg" height="100%" title="Băng Đảng Ấn Độ - Gangs of Wasseypur (2012 | 320)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/bang-dang-do-gang-of-wasseypur.html">Băng Đảng Ấn Độ - Gangs of Wasseypur (2012 | 320)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://2.bp.blogspot.com/-LXjTwRYP3XI/UtRrxSUiOiI/AAAAAAAAA6M/709ga85WBDY/s72-c-no/phim-3-gio-sang.jpg","w270-h350-c","100%","100%","","3 Giớ Sáng - 3 am (2013 | 96)");
</script><img alt="3 Giớ Sáng - 3 am (2013 | 96)" src="http://2.bp.blogspot.com/-LXjTwRYP3XI/UtRrxSUiOiI/AAAAAAAAA6M/709ga85WBDY/w270-h350-c-no/phim-3-gio-sang.jpg" height="100%" title="3 Giớ Sáng - 3 am (2013 | 96)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/3-gio-sang-3-am.html">3 Giớ Sáng - 3 am (2013 | 96)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://2.bp.blogspot.com/-hC4xal02oH0/UtRqUhp2-YI/AAAAAAAAA6A/OL-4HVLMsE8/s72-c-no/phim-mat-vu.jpeg","w270-h350-c","100%","100%","","Mật Vụ - Gabbar Singh (2013 | 153)");
</script><img alt="Mật Vụ - Gabbar Singh (2013 | 153)" src="http://2.bp.blogspot.com/-hC4xal02oH0/UtRqUhp2-YI/AAAAAAAAA6A/OL-4HVLMsE8/w270-h350-c-no/phim-mat-vu.jpeg" height="100%" title="Mật Vụ - Gabbar Singh (2013 | 153)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/mat-vu-gabbar-singh.html">Mật Vụ - Gabbar Singh (2013 | 153)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://1.bp.blogspot.com/-kvRTt_DQJCs/UtRoIgSXM9I/AAAAAAAAA5o/S4oJvv09p6U/s72-c-no/phim-ke-dien-loan.jpg","w270-h350-c","100%","100%","","Kẻ Điên Loạn - Maniac (2012 | 89)");
</script><img alt="Kẻ Điên Loạn - Maniac (2012 | 89)" src="http://1.bp.blogspot.com/-kvRTt_DQJCs/UtRoIgSXM9I/AAAAAAAAA5o/S4oJvv09p6U/w270-h350-c-no/phim-ke-dien-loan.jpg" height="100%" title="Kẻ Điên Loạn - Maniac (2012 | 89)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/ke-dien-loan-maniac.html">Kẻ Điên Loạn - Maniac (2012 | 89)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://3.bp.blogspot.com/-HGRwi-aQt1k/UtRldi1WiNI/AAAAAAAAA5Q/e1geljQzfDk/s72-c-no/phim-ao-giac.jpg","w270-h350-c","100%","100%","","Ảo Giác - Imaginaerum (2012 | 95)");
</script><img alt="Ảo Giác - Imaginaerum (2012 | 95)" src="http://3.bp.blogspot.com/-HGRwi-aQt1k/UtRldi1WiNI/AAAAAAAAA5Q/e1geljQzfDk/w270-h350-c-no/phim-ao-giac.jpg" height="100%" title="Ảo Giác - Imaginaerum (2012 | 95)" width="100%" /> <figcaption style="position: absolute; width: 100%;"> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/ao-giac-imaginaerum.html">Ảo Giác - Imaginaerum (2012 | 95)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://1.bp.blogspot.com/-0oHq3BlWPHA/UtRjl2ul7sI/AAAAAAAAA5A/rc51oz9Ecdc/s72-c-no/phim-bong-toi-chet-choc.jpg","w270-h350-c","100%","100%","","Bóng Tối Chết Chóc - Dead Shadows (2012 | 75)");
</script><img alt="Bóng Tối Chết Chóc - Dead Shadows (2012 | 75)" src="http://1.bp.blogspot.com/-0oHq3BlWPHA/UtRjl2ul7sI/AAAAAAAAA5A/rc51oz9Ecdc/w270-h350-c-no/phim-bong-toi-chet-choc.jpg" height="100%" title="Bóng Tối Chết Chóc - Dead Shadows (2012 | 75)" width="100%" /> <figcaption style="position: absolute; width: 100%;"> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/bong-toi-chet-choc-dead-shadows.html">Bóng Tối Chết Chóc - Dead Shadows (2012 | 75)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://3.bp.blogspot.com/-yfsJ79G9kr4/UtRG79UM8oI/AAAAAAAAA4k/PzH_krYcCWo/s72-c-no/phim-cuoc-chien-mang-xa-2.jpg","w270-h350-c","100%","100%","","Cuộc Chiến Mãng Xà 2 - G.I. Joe: Retaliation (2013 | 110)");
</script><img alt="Cuộc Chiến Mãng Xà 2 - G.I. Joe: Retaliation (2013 | 110)" src="http://3.bp.blogspot.com/-yfsJ79G9kr4/UtRG79UM8oI/AAAAAAAAA4k/PzH_krYcCWo/w270-h350-c-no/phim-cuoc-chien-mang-xa-2.jpg" height="100%" title="Cuộc Chiến Mãng Xà 2 - G.I. Joe: Retaliation (2013 | 110)" width="100%" /> <figcaption style="position: absolute; width: 100%;"> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/cuoc-chien-mang-xa-2-gi-joe-retaliation.html">Cuộc Chiến Mãng Xà 2 - G.I. Joe: Retaliation (2013 | 110)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://4.bp.blogspot.com/-onCnaX2CseU/UtREFlJ9X_I/AAAAAAAAA4Q/lpMO96L26jE/s72-c-no/phim-ben-ngoai-canh-rung-thong.jpg","w270-h350-c","100%","100%","","Bên Ngoài Cánh Rừng Thông - The Place Beyond The Pines (2013 | 140)");
</script><img alt="Bên Ngoài Cánh Rừng Thông - The Place Beyond The Pines (2013 | 140)" src="http://4.bp.blogspot.com/-onCnaX2CseU/UtREFlJ9X_I/AAAAAAAAA4Q/lpMO96L26jE/w270-h350-c-no/phim-ben-ngoai-canh-rung-thong.jpg" height="100%" title="Bên Ngoài Cánh Rừng Thông - The Place Beyond The Pines (2013 | 140)" width="100%" /> <figcaption style="position: absolute; width: 100%;"> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/ben-ngoai-canh-rung-thong-place-beyond.html">Bên Ngoài Cánh Rừng Thông - The Place Beyond The Pines (2013 | 140)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://1.bp.blogspot.com/-nWjO15_UzYI/UtRCEDI-pJI/AAAAAAAAA34/7lSfjPTwUlg/s72-c-no/phim-ma-cay.jpg","w270-h350-c","100%","100%","","Ma Cây - Evil Dead (2013 | 91)");
</script><img alt="Ma Cây - Evil Dead (2013 | 91)" src="http://1.bp.blogspot.com/-nWjO15_UzYI/UtRCEDI-pJI/AAAAAAAAA34/7lSfjPTwUlg/w270-h350-c-no/phim-ma-cay.jpg" height="100%" title="Ma Cây - Evil Dead (2013 | 91)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/ma-cay-evil-dead.html">Ma Cây - Evil Dead (2013 | 91)</a> </figcaption> </code></figure><code> </code></div>
<div class="newest">

<figure><code> <script type="text/javascript">
 converthumb("http://4.bp.blogspot.com/-nUmCNgqdM2U/UtRAIFloVBI/AAAAAAAAA3c/GI1Sp7WgF1I/s72-c-no/phim-bi-mat-trai-dat-diet-vong.jpg","w270-h350-c","100%","100%","","Bí Mật Trái Đất Diệt Vong - Oblivion (2013 | 124)");
</script><img alt="Bí Mật Trái Đất Diệt Vong - Oblivion (2013 | 124)" src="http://4.bp.blogspot.com/-nUmCNgqdM2U/UtRAIFloVBI/AAAAAAAAA3c/GI1Sp7WgF1I/w270-h350-c-no/phim-bi-mat-trai-dat-diet-vong.jpg" height="100%" title="Bí Mật Trái Đất Diệt Vong - Oblivion (2013 | 124)" width="100%" /> <figcaption> <a exper:title="data:post.title" href="http://phim-online-viet.blogspot.com/2014/01/bi-mat-trai-dat-diet-vong-oblivion.html">Bí Mật Trái Đất Diệt Vong - Oblivion (2013 | 124)</a> </figcaption> </code></figure><code> </code></div>
</div>
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh

0 nhận xét:

Ads by Google