Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tips bagaimana Cara Membuat Slide Image di Dalam Box Menggunakan Bootstrap.
Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi slide.
Ok, langsung saja saya kasih tau Cara Membuat Slide Image di Dalam Box Menggunakan Bootstrap:
– Pertama ketikan code HTML di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Home</title> <!-- CSS--> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="css/ug.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <center class="titleBlock"> <h1>Dumetschool</h1> <p> <b>Arahkan pointer ke image untuk melihat efeknya</b> </p> </center> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <center> <div class="displayWrapper"> <div class="displayBox"> <img src="images/dumetschool.png" alt="image1"/> </div> </div> <h4>Kursus Website</h4> </center> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> |
– Ke-dua Jangan lupa tambahkan folder images untuk menyimpan imagenya pada folder bootstrap teman-teman:
– Ke-tiga ketikan code css berikut ini, saya memberi nama filenya dengan nama ug.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
@import url('https://fonts.googleapis.com/css?family=Raleway'); html , body { height:100%; width:100%; background:#f1f1f1; font-family: 'Raleway', sans-serif; overflow-x:hidden; } .titleBlock { width:70%; margin-left:15%; } /**Membuat list-box**/ .displayWrapper { box-shadow: 0 0 15px rgba(0,0,0,0.6); padding: 10px; width:320px; margin-top:20px; } /**Membatasi tampilan image di box**/ .displayBox { width:300px; height:300px; overflow: hidden; } /**Memberi efek slide pada saat di hover**/ .displayBox img { width:100%; -webkit-transition: all 5s ease; transition: all 5s ease; position:relative; } .displayBox img:hover { cursor:pointer; transform: translateY(-83.7%); } |
– Ke-empat ketik tag link untuk memanggil file css, jangan lupa ketikan ug.css sehingga tidak mengubah css bawaan bootstrap:
|
1 |
<link href="css/ug.css" rel="stylesheet"> |
Ok, sekarang kita lihat hasilnya yah teman-teman:
Nah efek yang kita berikan tadi akan men-slide gambar dari bawah ke atas pada saat cursor kita arah-kan pada image di dalam box.
Sekian tips dari saya kali ini tentang Cara Membuat Slide Image di Dalam Box Menggunakan Bootstrap. Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.