Gambar di situs web cukup sering ditemukan dan berukuran besar, namun desain situs web tidak selalu memungkinkan untuk ditempatkan dalam format penuh. Oleh karena itu, kita perlu menemukan cara yang memungkinkan kita untuk meningkatkannya.

Mari kita mulai dengan metode primitif dan diakhiri dengan cara terbaik untuk memperbesar gambar.

gambar-atau-salinan-yang lebih kecil "/>

Penjelasannya misalnya:

• - agar tautan tidak memindahkan bobot ke gambar;
• target="_blank" - gambar akan terbuka di tab baru.

Parameter terakhir cukup penting, karena sering kali situasi berikut mungkin timbul karena kurangnya pengalaman pengguna: setelah membuka halaman dengan gambar, dia tidak tahu cara kembali dan karena itu hanya menutup tab, yang berarti dia meninggalkan situs sepenuhnya . Dengan menentukan parameter terakhir, kami melindunginya dari kasus seperti itu, karena halaman awal masih terbuka.

Contoh pekerjaan:

Meskipun mudah digunakan, metode ini jauh dari yang terbaik, karena Anda harus membuka halaman baru untuk memperbesar gambar, namun dengan metode ini Anda dapat melihat gambar dengan ukuran berapa pun. Jadi kami menyimpulkan: jika Anda perlu memperbesar gambar yang sangat besar, maka ini adalah satu-satunya cara yang pasti untuk melakukannya.

Nama metode ini dengan jelas mencerminkan esensinya: saat Anda mengarahkan kursor mouse ke atas gambar, gambar tersebut akan diperbesar secara otomatis. Penerapan metode ini masih dasar, tetapi sekali lagi saya tidak menyukai metode ini karena tidak mungkin hanya menggerakkan kursor pada gambar. Bagaimanapun, itu akan selalu meningkat - ini mungkin mulai mengganggu pengguna.

Kode berikut mengimplementasikan kemampuan untuk memperbesar secara otomatis saat mengarahkan kursor:

Penjelasannya misalnya:

• img.zoom (max-width: 150px ) - mengatur lebar gambar sebelum memperbesar;
• img.zoom:hover (max-width: none ) - mengatur lebar gambar setelah diperbesar (parameter none berarti tidak ada batasan ukuran maksimum);

Ini adalah metode memperbesar gambar yang paling umum dan nyaman. Apalagi ada banyak metode dan pilihan implementasi. Mari kita lihat beberapa opsi paling populer:

Setelah mengklik gambar, gambarnya membesar, tetapi karena itu teksnya bergerak ke bawah, jadi metode ini jauh dari yang terbaik. Berikut contoh kodenya:

Bagaimana tampilannya di halaman:

Di bawah ini adalah kode untuk mengimplementasikan metode ini

gambar_besar "/>

gambar_kecil " id ="imagenM1 " />

Bagaimana tampilannya di halaman:

Opsi 3.1 dan 3.2 sepenuhnya didasarkan pada kemampuan CSS, yang berarti metode tersebut “ringan”, karena jangan memuat halaman dengan skrip yang tidak perlu. Ada opsi lain yang juga berbasis CSS, namun lebih eksotik. Saya tidak akan membahasnya di artikel ini karena beberapa browser tidak mendukung hal seperti itu.

Cara ini menurut saya paling indah dan nyaman. Untuk menghubungkannya, Anda harus sedikit mengotak-atik dengan menambahkan berbagai skrip, jadi untuk mengimplementasikannya, mari pertimbangkan instalasi langkah demi langkah:

Arsip akan berisi satu folder berisi gambar, dua file .js dan satu .css.

2) Tambahkan file-file ini ke situs Anda sebagaimana adanya di arsip (yaitu folder imgs harus berada di direktori tempat file .js dan .css berada).

3) Pada setiap halaman situs yang akan menggunakan pembesaran gambar, Anda perlu menghubungkan metode dan gaya simplebox:

Catatan
Alih-alih alamat salinan gambar yang lebih kecil, Anda dapat memasukkan alamat gambar utama, tetapi pada saat yang sama menerapkan atribut lebar, di mana Anda menentukan lebar kecil (baca selengkapnya).

Bagaimana tampilannya di halaman.

| 18.02.2016

CSS3 membuka kemungkinan tak terbatas bagi desainer UI, dan keuntungan utamanya adalah hampir semua ide dapat dengan mudah diimplementasikan dan diwujudkan tanpa menggunakan JavaScript.

Sungguh menakjubkan bagaimana hal-hal sederhana dapat menghidupkan halaman web biasa dan membuatnya lebih mudah diakses oleh pengguna. Kita berbicara tentang transisi CSS3, yang dengannya Anda dapat mengizinkan suatu elemen untuk mengubah dan mengubah gaya, misalnya, saat mengarahkan kursor. Sembilan contoh animasi CSS3 yang tersedia di bawah ini akan membantu Anda menciptakan nuansa responsif di situs web Anda, serta meningkatkan tampilan halaman secara keseluruhan dengan transisi yang indah dan mulus.

Untuk informasi lebih detail, Anda dapat mengunduh arsip beserta file.

Semua efek bekerja menggunakan properti transisi. transisi- "transisi", "transformasi") dan pseudo-class:hover, yang menentukan gaya elemen ketika kursor mouse diarahkan ke atasnya (dalam tutorial kami). Sebagai contoh, kami menggunakan div 500x309 px, warna latar belakang awal #6d6d6d, dan durasi transisi 0,3 detik.

Badan > div ( lebar: 500px; tinggi: 309px; latar belakang: #6d6d6d; -webkit-transition: semua kemudahan 0,3 detik;; -moz-transisi: semua kemudahan 0,3 detik;; -o-transisi: semua kemudahan 0,3 detik;; transisi: semua kemudahan 0,3 detik)

Dahulu kala, menerapkan efek seperti itu merupakan pekerjaan yang cukup melelahkan, dengan perhitungan matematis dari nilai RGB tertentu. Sekarang cukup menulis gaya CSS di mana Anda perlu menambahkan pseudo-class:hover ke pemilih dan mengatur warna latar belakang yang akan dengan mulus (dalam 0,3 detik) menggantikan warna latar belakang asli saat Anda mengarahkan kursor ke blok:

Warna: arahkan kursor ( latar belakang:#53ea93; )

Transformasi yang menarik dan mencolok adalah bingkai bagian dalam yang tampak mulus saat Anda mengarahkan mouse. Sangat cocok untuk mendekorasi berbagai kancing. Untuk mencapai efek ini, kami menggunakan properti pseudo-class:hover dan box-shadow dengan parameter inset (mengatur bayangan di dalam elemen). Selain itu, Anda perlu mengatur bentangan bayangan (dalam kasus kami adalah 23px) dan warnanya:

Batas: arahkan kursor ( bayangan kotak: sisipan 0 0 0 23px #53ea93; )

Animasi CSS ini merupakan pengecualian, karena properti transisi tidak digunakan di sini. Sebagai gantinya kami menggunakan:

• @keyframes adalah arahan dasar untuk membuat animasi CSS frame-by-frame, yang memungkinkan Anda melakukan apa yang disebut. storyboard dan mendeskripsikan animasi sebagai daftar poin-poin penting;
• animation and animation-iteration-count - properti untuk mengatur parameter animasi (durasi dan kecepatan) dan jumlah siklus (pengulangan). Dalam kasus kami, ulangi 1.

animasi: ayunan kemudahan 0,6 detik;

-jumlah-iterasi-animasi-webkit: 1;

jumlah iterasi animasi: 1; ) 4. Atenuasi

Pudar ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

Untuk hasil sebaliknya, tukar nilainya:

Untuk memperbesar blok saat diarahkan, kita akan menggunakan properti transform dan menyetelnya ke scale(1.2) . Dalam hal ini, blok tersebut akan meningkat sebesar 20 persen dengan tetap mempertahankan proporsinya:

Tumbuh: arahkan ( -webkit-transformasi: skala(1.2); -ms-transformasi: skala(1.2); transformasi: skala(1.2); )

Salah satu animasi yang umum digunakan adalah elemen persegi panjang yang berubah menjadi lingkaran ketika diarahkan. Dengan menggunakan properti border-radius CSS, yang digunakan bersama dengan :hover dan transisi , hal ini dapat dicapai tanpa masalah:

Lingkaran: arahkan kursor (radius batas: 70%; )

Opsi animasi yang menyenangkan adalah memutar elemen sejumlah derajat tertentu. Untuk melakukan ini, kita memerlukan properti transform lagi, tetapi dengan nilai yang berbeda -rotateZ(20deg) . Dengan parameter berikut, balok akan diputar 20 derajat searah jarum jam relatif terhadap sumbu Z:

Putar: arahkan kursor ( -webkit-transformasi: putarZ(20 derajat); -ms-transformasi: putarZ(20 derajat); transformasi: putarZ(20 derajat); )

Pendapat para desainer berbeda mengenai apakah efek ini sesuai dalam desain datar. Namun animasi CSS3 ini cukup orisinal dan juga digunakan pada halaman web. Kita akan mencapai efek tiga dimensi menggunakan properti box-shadow yang sudah familiar (akan membuat bayangan multi-layer) dan mentransformasikannya dengan parameter TranslateX(-7px) (akan memastikan pergeseran horizontal blok ke kiri sebesar 7 piksel ):

Bertiga: arahkan kursor ( bayangan kotak: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); transformasi: terjemahanX(-7px )

Browser berikut saat ini mendukung properti transisi:

Properti lainnya yang digunakan dalam contoh ini, seperti transform , box-shadow , dll., juga didukung oleh hampir semua browser modern. Namun, jika Anda akan menggunakan ide ini untuk proyek Anda, kami sangat menyarankan Anda memeriksa ulang kompatibilitas lintas-browser.

Kami harap contoh animasi CSS3 ini bermanfaat bagi Anda. Kami berharap Anda sukses kreatif!

Halo para pembaca yang budiman. Saya berpikir dan berpikir dan memutuskan untuk menulis artikel tentang cara memperbesar foto dengan indah saat Anda mengarahkan mouse ke atasnya.

Kegembiraan saya tidak mengenal batas, dan bukan karena itu fitur yang menarik, dan bukan karena masa kecil saya bermain di satu tempat :) Saya ingin mengatakan bahwa saya tidak mengharapkan efek seperti itu.

Saya seorang blogger baru, muda, pemula. Saya praktis tidak tahu cara menggunakan program perkantoran, apalagi Photoshop. Saya membuat blog, tapi ternyata saya harus belajar dari bawah. Teko dengan teko. Yang saya tahu hanyalah mengambil tangkapan layar di Paint.

Saya berani mengatakan bahwa tidak mungkin melihat tangkapan layar saya tanpa air mata. Namun di luar dugaan, ketika saya bereksperimen dan menambahkan gadget ke blog, foto-foto saya mulai diputar, bersinar, berkilau dengan warna-warna cerah, tampak hidup dan memulai hidup baru, kontras ditambahkan ke dalamnya.

Semua gambar di blog akan memiliki efek zoom yang halus. Gambar tidak diperbesar hingga memenuhi seluruh layar, namun meluncur keluar dengan mulus dan menjadi hidup. Efek 3D nyata.

Kode dipasang seperti gadget HTML/JavaScript biasa di mana saja. Anda dapat membaca artikel “” di blog saya.

.post-body img ( -webkit-transition: semua 0,4 detik kemudahan;-moz-transisi: semua 0,4 detik kemudahan;transisi: semua 0,4 detik kemudahan;padding: 8px;latar belakang: #ffffff;border: 1px solid #d0d0d0;- moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);box-shadow: 0 0 20px rgba(0, 0, 0, .2);-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;).post-body img:hover (-moz-transform: skala(1.1);-webkit-transformasi: skala(1.1);-o-transformasi: skala(1.1);-ms-transformasi: skala(1.1);transformasi: skala(1.1);latar belakang: #ffffff;batas: 1px solid #cccccc;teks-dekorasi: tidak ada;teks-bayangan: tidak ada;-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0,5em rgba(0,0,6,0.5);bayangan kotak: 1em 1em 1em -0.5em rgba(0,0,6,0.5);)

Saya menggunakan teknik ini dengan gambar di blog saya. Saat pengguna mengarahkan kursor ke thumbnail postingan mana pun, gambar tersebut akan membesar secara bertahap. Setuju, tidak buruk sama sekali dan terlihat cantik.

Dan ini dilakukan hanya dengan menggunakan CSS3, dan cukup sederhana. Sekarang saya akan memberi tahu Anda cara melakukan ini.

Anda dapat melihat cara kerjanya di demo dan di blog saya di halaman utama.

HTML

Pertama, kita perlu menyiapkan markup html sederhana untuk gambar kita, dalam hal ini kita akan memiliki 3 gambar.

CSS

Dan inilah tampilan gayanya:

Kami membuat blok reguler berukuran 380 x 250 piksel. Blok ini harus berukuran sama dengan gambar (dalam kasus kami 380 x 250). Oleh karena itu, jika gambar Anda lebih besar atau lebih kecil, buatlah ukuran blok .image sama dengan ukuran gambar.

Dan pastikan untuk menyetel aturan overflow:hidden; Hal ini diperlukan agar gambar kita tidak melampaui blok saat diperbesar.

Sekarang kita menetapkan aturan untuk gambar itu sendiri:

Image img ( -moz-transition: semua 1 kemudahan; -o-transisi: semua kemudahan 1; -webkit-transition: semua kemudahan 1; ) .image img:hover( -webkit-transform: scale( 1.1); -moz-transformasi: skala(1.1); -o-transformasi: skala(1.1);

Animasi terjadi menggunakan parameter di CSS3. Keseluruhan animasi membutuhkan waktu satu detik. Jika Anda ingin gambar diperbesar lebih cepat, kurangi nilai ini.

Dalam demo, gambar diperbesar 1,1 kali. Jika Anda menyetel nilainya ke 2, ukuran gambar akan berlipat ganda dan seterusnya.

Itu saja, teman-teman. Seperti yang dijanjikan, pelajarannya akan sangat sederhana. Saya harap Anda menyukai efek sederhana untuk gambar ini. Sampai berjumpa lagi.

Cascading style sheet (CSS) tidak tinggal diam. Aturan baru untuk menampilkan dan menampilkan informasi di layar terkadang dapat menggantikan kerja keseluruhan “Java Script”.

Contoh No.1. Pembesaran gambar, di dalam blok. Agar Anda dan saya dapat saling memahami apa yang sedang kita bicarakan, saya sarankan Anda mengklik link tersebut"Contoh No. 1"

, di akhir artikel, dan buka untuk melanjutkan percakapan. Faktanya, saya mungkin harus menulis 98% kode HTML dan CSS untuk menampilkan halaman secara visual, dan hanya 2%, atau mungkin kurang, yang diperlukan untuk menghidupkan apa yang telah dibahas. .

Jadi kita memperhatikan contoh pertama. Di sini, saat Anda mengarahkan kursor, gambar secara bertahap mulai membesar di dalam blok. Blok ini dapat berupa elemen dengan tag, seperti dalam kasus saya, atau dapat berupa tabel biasa. Semuanya sangat sederhana di sini: buat, misalnya, tabel dengan lebar tetap dan tulis jalur ke gambar di dalam tag

Tabel telah dibuat, jalur telah ditentukan, sekarang kita menghubungkan file CSS dan menulis aturannya. Karena kita bisa memiliki banyak tabel, lebih baik kita membuat selector identifier, misalnya # tabel.

Saya ingin segera mengatakan bahwa seratus gambar yang saya pilih memiliki ukuran 600x600 piksel, jadi untuk saat ini tidak mematuhi aturan ukuran tabel saya dan meregangkannya. Tapi ini masalah yang bisa diperbaiki, mari kita edit lebih lanjut, atau lebih tepatnya perkecil gambarnya seperti ini:

#tabel img( lebar: 300px; tinggi:300px; )

Sekarang mari kembali ke #table identifier dan tambahkan yang berikut ini. Atribut overflow bertanggung jawab untuk menahan elemen di dalam blok jika dimensi blok melebihi proporsi shell (blok, tabel). Dan kemudian kami memberikan aturan tersembunyi, yang mengatakan, jika Anda ingin menampilkan semuanya, maka tampilkan hanya di sini dan tidak lebih satu piksel pun dari proporsi yang ditentukan. Secara umum, tampilannya akan seperti ini:

#tabel ( lebar: 300px; tinggi:300px; batas: 1px solid #121AF0; overflow: tersembunyi; )

Selanjutnya kita perlu mengatur tindakan hover. Atribut hover (saat hover) bertanggung jawab atas fungsi ini. Namun di sini pada aturan kita perlu mengubah dan menunjukkan skala transformasi menggunakan aturan skala, dalam tanda kurung kita tulis berapa kali perlu ditingkatkan, misalnya kita memiliki “skala(1.3)”, yang artinya 1 dan 3 kali. Juga, jangan lupa bahwa dengan aturan CSS baru apa pun, Tuan-tuan, browser ingin ditujukan kepada Anda secara individual. Secara umum, kita menulis kode berikut:

#table img:hover( -webkit-transform: scale(1.3); /* untuk Google Chrome dan Safari */ -moz-transform: scale(1.3); /* untuk Firefox */ -o-transform: scale(1.3) ; /* untuk browser Opera */ )

Sekarang kita dapat menyimpan semuanya dan memeriksa cara kerjanya. Ya, itu berhasil. Namun sayangnya, gambaran kita berkembang sangat pesat. Dan di sinilah atribut transisi membantu kita. Kami memberikan aturan berikut: semua 1s ease-out, yang memberi tahu browser "Buat tampilan yang mulus, untuk satu detik 1s" dan sekali lagi, jangan lupa untuk tunduk pada browser, masing-masing satu per satu, sehingga pada akhirnya semuanya akan berjalan lancar. terlihat seperti ini:

#table img( lebar: 300px; tinggi:300px; -moz-transition: semua 1s ease-out; /* untuk Firefox */ -o-transition: semua 1s ease-out; /* untuk browser Opera */ -webkit - transisi: kemudahan semua 1; /* untuk Google Chrome dan Safari */ )

Simpan, segarkan halaman di browser dan tonton. Sekarang semuanya baik-baik saja, mulus, perlahan indah, gambar kita merangkak ke dalam blok tabel.

Dengan contoh kedua, ketika gambar diperbesar, segalanya akan menjadi lebih sederhana. Mari kita lihat apa yang kita dapatkan pada contoh pertama. Kami telah membuat tabel dengan ID< table id =" table " >membuat tiga grup aturan gaya untuk itu, #table, #table img, #table img:hover.

Selanjutnya, salin tabelnya, tempel di bawah dan berikan ID baru< table id =" table 2" >. Selanjutnya, salin semua gaya dalam tabel, tempelkan di bawah dengan pengenal baru: #table2, #table2 img , #table2 img:hover . Sekarang dari gaya ID #table2, salin dan hapus baris overflow:hidden; dan paste ke ID #table2 img. Jika semuanya sudah benar maka akan terlihat seperti ini:

#table2 img( lebar: 300px; tinggi:300px; overflow: tersembunyi; -moz-transition: semua 1s ease-out; /* untuk Firefox */ -o-transition: semua 1s ease-out; /* untuk browser Opera * / -webkit-transition: semua kemudahan; /* untuk Google Chrome dan Safari */ )

Dan semuanya harusnya berhasil. Jika diinginkan, di #table2 img:hover, ubah nilai skala(1.3) ke nilai yang lebih besar untuk ketiga browser dan gambar kita akan berubah ukurannya saat diarahkan.

Yah, mungkin itu saja, kedua tugas memperbesar gambar menggunakan CSS telah dilaksanakan. Seperti yang Anda lihat, kodenya sebenarnya tidak besar atau rumit.

Saya ingatkan kembali, untuk melihat source code dan contoh pengerjaannya, klik “Contoh No. 1” di bagian bawah halaman. Untuk menerima tautan unduhan dari Yandex Disk, Anda perlu mengklik blok di bawah ini pada ikon jejaring sosial tempat Anda terdaftar, atau masuk (dengan mendaftar) di situs web kami!