تخطيط / أداة HTML/CSS و أضف فوق المواضيع
اخترنا لك
<style> .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 380px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h3 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 12px; 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: 0px 10px;margin-left:0px; background: #fff; color: #000; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } .view-first img { transition: all 0.2s linear; } .view-first .mask { opacity: 0; background-color: rgba(116, 112, 206, 0.75); transition: all 0.4s ease-in-out; margin-left:-49px;} .view-first h3 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out; }.view-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h3, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; } </style> <center> <table> <tr><td> <div class="view view-first"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZkVJkpG36VOZIZAAxuxprr37QL58ce5HR5A9GupiEXAlvuZ3QK1WSzVzW2vXjOjGaspxhA_gzIfVTqL3jYtqH15sJqvqpjL3xgIFGHCnP2XpsNyo_TsTBZrV1h1d_xO3nqlhc6spEIQ/s320/norway_mountain_river-1920x1200.jpg" /> <div class="mask"> <h3>هذا النص هو مثال لنص يمكن أن يستبدل
</h3> <p>هذا النص هو مثال لنص يمكن أن يستبدل
</p> <a href="http://exempblog111.blogspot.com/2013/11/windows.html" class="info">اقرأ المزيد</a> </div> </div>
<div class="view view-first"> <img src="http://i1.ytimg.com/vi/UEvOynaDX4g/mqdefault.jpg" /> <div class="mask"> <h3>هذا النص هو مثال لنص يمكن أن يستبدل
</h3> <p>هذا النص هو مثال لنص يمكن أن يستبدل
</p> <a href="http://exempblog111.blogspot.com/2013/11/windows.html" class="info">اقرأ المزيد</a> </div> </div> </td> </tr> </table> </center>
السلايدشو:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<div id="s3slider-container"> <div class="s3slider loading" style="width:620px;height:385px;margin-top: 13px;"> Memuat... </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> var s3slider_config = { url: 'http://exempblog111.blogspot.com/', numPost: 4, labelName: null, monthArray: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', newTabLink: false, containerId: 's3slider-container', slider: { width: 620, height: 385, timeOut: 4000 } }; </script> <script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script> </b:if></b:if></b:if>
Aucun commentaire:
Enregistrer un commentaire