CSS Popup Image Viewer - Hallo sahabat TutorAsem, Pada Artikel yang anda baca kali ini dengan judul CSS Popup Image Viewer, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Trick ngeblog di blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : CSS Popup Image Viewer
link : CSS Popup Image Viewer

CSS Popup Image Viewer

CSS Popup Image Viewer adalah kode CSS yang berfungsi untuk menampilkan gambar pada jendela baru (popup)dengan ukuran yang berbeda apabila gambar disorot dengan mouse.

Sebagai contoh coba sampeyan sorot gambar dan link dibawah ini;

Dalam bentuk gambar

dalam bentuk link

Contoh Link

Kode dan cara mengaplikasikan di blogger sebagai berikut;

Login dengan akun sampeyan di Blooger

Pasang kode ini pada template blog sampeyan tepatnya diatas kode ]]></b:skin>

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #fff;
padding: 10px;
left: -1000px;
border: 5px solid #ccc;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 5px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}

Kemudian Pasang kode HTML berikut ini untuk membuat CSS Popup Image Viewer, letakan dimanapun kita ingin menampilkannya,Misalnya saja pada halaman Posting;

Dalam bentuk gambar

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxeouKAy-yWwFA06XCMkJHNIPgmMWnrIWrx1mjw5WNfN3d5_jGswTmvIedHs4hNgmQSYFN2gNElWsX4VCDgtmoYw57UIXzKqZjFBQmiv8gbtcrfoNSpBmdMabdbWcJ5igKxyeJVoxUFkA/s1600/vector.jpg" height="298" width="320" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxeouKAy-yWwFA06XCMkJHNIPgmMWnrIWrx1mjw5WNfN3d5_jGswTmvIedHs4hNgmQSYFN2gNElWsX4VCDgtmoYw57UIXzKqZjFBQmiv8gbtcrfoNSpBmdMabdbWcJ5igKxyeJVoxUFkA/s1600/vector.jpg" />
</span></a>

dalam bentuk link

<a class="thumbnail" href="http://belajar-coreldraw.blogspot.com/2014/05/perbedaan-vector-art-dan-vexel-art.html">Contoh Link<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxeouKAy-yWwFA06XCMkJHNIPgmMWnrIWrx1mjw5WNfN3d5_jGswTmvIedHs4hNgmQSYFN2gNElWsX4VCDgtmoYw57UIXzKqZjFBQmiv8gbtcrfoNSpBmdMabdbWcJ5igKxyeJVoxUFkA/s1600/vector.jpg"/></span></a>

kalau berkenan dan mau pake, ganti URL link dan URL gambar dengan punya sampeyan

Demikianlah Artikel CSS Popup Image Viewer

Sekianlah artikel CSS Popup Image Viewer kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel CSS Popup Image Viewer dengan alamat link https://tutorasem.blogspot.com/2014/05/css-popup-image-viewer.html

Tweet