Tampilan Model Gambar Satu
Masjid Haram
Masjid Al Aqsha
Masjid Nabawi
Kode HTML dan CSS Tampilan Model Gambar Satu
<style type="text/css">
·img-sedang {list-style:none;margin:0;padding:0;width:100%;}
/* Memberikan Garis Pinggir Warna Merah */
·img-sedang li {float:left;border:transparan 1px solid;margin:5px;padding:0;width:180px;height:160px;}
·img-sedang h3:hover {color:#000000;text-decoration:underline;}
·img-sedang img {border-radius:100%;-moz-border-radius:100%;width:160px;height:120px;}
·img-sedang img:hover {border-radius:2px;-moz-border-radius:2px;width:160px;height:120px;}
·img-sedang h3 {color:#FF0000;}
</style>
<ul class="img-sedang">
<li><center><a href="http://goo.gl/OlxtJ" target="_blank">
<img src="http://goo.gl/OlxtJ" alt="Masjid Haram"/></a>
<h3>Masjid Haram</h3></center></li>
<li><center>
<a href="http://goo.gl/tdrvH" target="_blank">
<img src="http://goo.gl/tdrvH" alt="Masjid Al Aqsha"/></a>
<h3>Masjid Al Aqsha</h3>
</center></li>
<li><center>
<a href="http://goo.gl/H3wpB" target="_blank">
<img src="http://goo.gl/H3wpB" alt="Masjid Istiqlal"/></a>
<h3>Masjid Istiqlal</h3>
</center></li>
<li><center>
<a href="http://goo.gl/pBx3u" target="_blank">
<img src="http://goo.gl/pBx3u" alt="Masjid Nabawi"/></a>
<h3>Masjid Nabawi</h3>
</center></li>
</ul>
Tampilan Model Gambar Dua
Kode HTML dan CSS Tampilan Model Gambar Dua
<style type="text/css">
·pulloutimage {position:relative;}
·pulloutimage img {position: absolute; /*absolute position and stack images inside container*/ left: 0;}
·pulloutimage img·ondemand {/*CSS for image shown on demand */opacity: 0;visibility: hidden; /* hide it initially (mainly for legacy browsers)*/width:100px;height:100px;}
·pulloutimage img·original{z-index: 1;/* set base z-index of initially shown image*/width:75px;height:75px;}
@-webkit-keyframes revealfromright {/*keyframe animation that slides a DIV out from another before overlapping later*/0%{/*Start of animation */z-index:-1;opacity: 0;} 50% {/*Half way point, move image to right edge of container*/opacity:1;z-index:-1;left:100%;box-shadow:none;} 51%{/* 51% point, stack animating image on top of original image*/ z-index: 2;} 100%{/* Final point, move animating image back so it's on top of original*/ left: 0;box-shadow: 8px 8px 15px gray;}}
@-moz-keyframes revealfromright {0%{z-index:-1;opacity:0;} 50%{opacity:1;z-index:-1;left:100%;box-shadow:none;}51%{z-index:2;} 100%{left:0;box-shadow: 8px 8px 15px gray;}}
@-ms-keyframes revealfromright{0%{z-index:-1;opacity:0;} 50%{opacity:1;z-index:-1;left:100%;box-shadow: none;} 51%{z-index:2;} 100% {left:0;box-shadow: 8px 8px 15px gray;}}
·pulloutimage:hover img·ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-name:revealfromright;-moz-animation-duration: 1s;-moz-animation-iteration-count: 1;-ms-animation-name:revealfromright;-ms-animation-duration: 1s;-ms-animation-iteration-count: 1;animation-name:revealfromright;animation-duration: 1s;animation-iteration-count: 1;visibility:visible;opacity:1;box-shadow: 8px 8px 15px gray;z-index:2;}
·pulloutimage:hover img·original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0·5;}
</style>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/Kehkt"/>
<img class="ondemand" src="http://goo.gl/Kehkt"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/fNv2d"/>
<img class="ondemand" src="http://goo.gl/fNv2d"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/ixw9k"/>
<img class="ondemand" src="http://goo.gl/ixw9k"/>
</div>
<br/>
<div class="pulloutimage" style="width:100px; height:100px">
<img class="original" src="http://goo.gl/ixw9k"/>
<img class="ondemand" src="http://goo.gl/ixw9k"/>
</div>
Tampilan Model Gambar Tiga
Alamanda berasal dari Brazilia, Amerika Selatan. Nama Ilmianya Alamanda cathartica, di Indonesia dikenal dengan sebutan Alamanda. Tinggi batang bisa mencapai 6 meter, pohon berkayu, tumbuh merambat. Daunnya tumbuh pada batang atau cabang, selalu empat lembar dan melingkari batang. Karakteristik daun berujung runcing, tebal dan memanjang serta biasanya agak terpilin bagian tepinya.
Alamanda dapat dipergunakan sebagai tanaman herbal dengan cara daunnya direbus hingga airnya mendidih, lalu hirup uap air rebusan daun tersebut sedikit demi sedikit untuk menghilangkan sakit batuk. Untuk menghilangkan sakit perut, rebus akarnya lalu minum air rebusan akar Alamanda
Kembang Sepatu, nama ilmiahnya Hibicus rosa sinensis. Kembang Sepatu dapat dipergunakan sebagai tanaman herbal, air rebusan akarnya dapat menetralkan daya racun yang berbahaya, selain itu dapat juga menyembuhkan sakit sariawan dan sakit radang tenggorokan. Untuk penyakit bronkhitis dapat memanfaatkan air rebusan bunga Kembang Sepatu.
Karakteristik tanaman Kembang Sepatu, tinggi tanaman bisa mencapai 4 meter, daunnya berbentuk hati merucing berlekukan.Bunganya berbentuk seperti lonceng atau terompet, serta Warnanya bunganya bisa merah atau merah muda. Usia bunga dewasa hanya dua hari setelah itu bunganya akan layu.
Kode HTML dan CSS Tampilan Model Gambar Tiga
<style type="text/css">
·somediv {width: 100%;clear: left;border: 1px solid gray;}
·somediv ·boxkiri {float: left;width: 155px;}
·somediv ·boxkiri p {margin-top: 0;margin-left: 155px;}
·somediv ·boxkanan {float: right;width: 155px;}
·somediv ·boxkanan p {margin-top: 0;margin-left: 155px;}
*html ·somediv p {/* IE 3px jog hack*/ height: 1%;}
</style>
<div class="somediv">
<div class="boxkiri">
<img border="0" src="http://goo.gl/VIr8l" width="151" height="113"/>
</div>
<p>Alamanda..,</p>
<div class="boxkanan">
<img border="0" src="http://goo.gl/fNv2d" width="151" height="113"/>
</div>
<p>Kembang Sepatu,...</p>
</div>
Tampilan Model Gambar Empat
Bunga Mahkota Putih
Bunga Terompet Ungu
Bunga Terompet Pink
Karangan Bunga
Gambar Bunga 1
Bunga Mahkota Pink
Gambar Bunga 2
Bunga Matahari Mahkota Pink
Kode HTML dan CSS Tampilan Model Gambar Empat
<style type="text/css">
·gallerycontainer{position: relative;/*Add a height attribute and set to largest image's height to prevent overlaying*/}
·thumbnail img{border: 1px solid white;margin: 0 5px 5px 0;}
·thumbnail:hover{background-color: transparent;}
·thumbnail:hover img{border: 1px solid blue;}
·thumbnail span{/*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
·thumbnail span img{ /*CSS for enlarged image*/ border-width: 0;padding: 2px;}
·thumbnail:hover span{ /*CSS for enlarged image*/visibility: visible;top: 0;left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50;}
</style>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/Kehkt" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/Kehkt"/><br/>Bunga Mahkota Putih</span></a>
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/miABi" width="100px" height="66px" border="0"/><span><img src="http://goo.gl/miABi"/><br/>Bunga Terompet Ungu</span></a>
<br/> <a class="thumbnail" href="#thumb"><img src="http://goo.gl/fNv2d" width="100px" height="75px" border="0"/><span><img src="http://goo.gl/fNv2d"/><br/>Bunga Terompet Pink</span></a>
<a class="thumbnail" href="#thumb"><img src="http://goo.gl/sM2vo" width="100px" height="70px" border="0" /><span><img src="http://goo.gl/sM2vo"/><br/>Karangan Bunga</span></a>
<br/> <a class="thumbnail" href="#thumb">Gambar Bunga 1<span><img src="http://goo.gl/VIr8l"/><br/>Bunga Mahkota Pink</span></a> <br/> <a class="thumbnail" href="#thumb">Gambar Bunga 2<span><img src="http://goo.gl/6b8FV"/><br/>Bunga Matahari Mahkota Pink</span></a>
</div>
