Gambar dengan CSS

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>

Tampilan Model Gambar Lima

Masjidil Haram pertama kali dibangun oleh Nabi Ibrahim Alaihissalam bersama Nabi Ismail Alaihissalam, pembangunannya pertama kali dilakukan dengan Membangun Ka'bah atas perintah Allah azza wa jalla, lalu dilanjutkan dengan membangun dinding Masjid. Adapun perluasan dilakukan oleh Khalifah Umar Bin Khattab radhiyallahu'anh tahun 638 Masehi, dilanjutkan oleh Khalifah Utsman bin Affan radhiyallahu'anh sekitar 647 Masehi. Imam Besar Masjid Haram saat ini adalah Syaikh Abdurrahman As Sudais.

Masjid Al Aqsha arti harfiahnya Masjid Terjauh. Masjid Al Aqsa pada awalnya merupakan rumah ibadah berukuran kecil yang didirikan oleh Umar Bin Khattab radhiyallahu'anh. Renovasi Masjid Al Aqsa dilakukan oleh Khalifah Abdul Malik dan Putranya Al Walid tahun 705 Masehi, Khalifah Abbasiyah Al Mansur tahun 754 Masehi, Khalifah Al Mahdi tahun 780 Masehi, lalu yang terakhir adalah Khalifah Fatimiyyah Ali Azh Zhahir tahun 1033 Masehi.

Masjid Istiqlal adalah Masjid terbesar di Asia Tenggara. Istiqlal artinya Merdeka, ide pendirian Masjid Istiqlal diprakarsai oleh KH. Wahid Hasyim, H. Anwar Tjokroaminoto dan KH. Taufiqurrahman pada tahun 1950

Masjid Nabawi Merupakan masjid kedua yang dibangun oleh Rasulullah shallahu'alaihi wasallam, setelah Masjid Quba. Lokasi Masjid Nabawi dulunya merupakan tempat penjemuran buah kurma milik dua bersaudara yatim yaitu Sahl dan Suhail bin 'Amr, yang kemudian dibeli oleh Rasullah shallahu'alaihi wasallam. Bersama para Sahabat dan kaum Muslimin, Rasulallahu shallahu'alaihi wasallam membangun Masjid Nabawi. Perluasan Masjid dilakukan oleh Khalifah Umar bin Khattab radhiyallahu'anh pada 17 Hijriah, Khalifah Utsman bin Affan radhiyallahu'anh pada 29 Hijriah, Raja Abdul Aziz dari kerajaan Saudi Arabia meluaskan Masjid ini menjadi 6.024 meterpersegi pada 1372 Hijriah, Raja Fahd pada 1414 Hijriah menjadi 100.000 meter persegi ditambah lantai atap mencapai luas 67.000 meter persegi dan pelataran masjid seluas 135.000 meter persegi. Masjid Nabawi kini dapat menampung kurang lebih 535.000 jamaah.

Freeware View

Software

Teknisi