Labkom99.com – Membuat mouseover zoom dan efek thumbnail menggunakan css3 sehingga menghasilkan zoom in dan efek bayangan pada gambar. Ketika mouse melayang di atas gambar bagian tengah gambar diperbesar di tempat asalnya dan kemudian ada layer ditampilkan disekitar gambar.
Dalam tutorial ini kita akan belajar bagaimana memanfaatkan CSS3 dengan cara yang sangat sederhana. Kami akan membuat efek hover thumbnail dengan transisi CSS3. Saat mengarahkan kursor ke gambar akan menampilkan deskripsi gambar dan memperbesar gambar.
Belajar HTML Dan CSS3 Dengan Tema Lain.
- Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
- Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
- Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal
- Belajar HTML Membuat Paragraf
- Belajar HTML5 dan Canvas Membuat Animasi Lingkaran
- Belajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3
- Belajar HTML + CSS: Penggunaan Dan Penjelasan Element CSS Float
- Membuat Kolom Layout Template HTML CSS + DIV
Berikut adalah surce code Dengan menggunakan HTML dan CSS3
HTML
Struktur HTML sangat sederhana dan intuitif ini adalah tempat dimana gambar dan informasi lain berada. Di dalam tampilan masukkan elemen dengan kelas yang membuat efek dengan CSS3 dan di dalamnya ada judul, deskripsi dan tautan ke gambar penuh.
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-4 col-sm-6"
>
<
div
class
=
"box"
>
<
img
src
=
"images/img-1.jpg"
>
<
div
class
=
"box-content"
>
<
h3
class
=
"title"
>Nama Gambar</
h3
>
<
span
class
=
"post"
>Keterangan Gambar</
span
>
</
div
>
<
ul
class
=
"icon"
>
<
li
><
a
href
=
"#"
><
i
class
=
"fa fa-search"
></
i
></
a
></
li
>
<
li
><
a
href
=
"#"
><
i
class
=
"fa fa-link"
></
i
></
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
class
=
"col-md-4 col-sm-6"
>
<
div
class
=
"box"
>
<
img
src
=
"images/img-2.jpg"
>
<
div
class
=
"box-content"
>
<
h3
class
=
"title"
>Nama Gambar</
h3
>
<
span
class
=
"post"
>Keterangan Gambar</
span
>
</
div
>
<
ul
class
=
"icon"
>
<
li
><
a
href
=
"#"
><
i
class
=
"fa fa-search"
></
i
></
a
></
li
>
<
li
><
a
href
=
"#"
><
i
class
=
"fa fa-link"
></
i
></
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
CSS
Setelah membuat HTML selanjutnya mengatur CSSnya dan menambahkan kelas khusus dengan gaya efek yang diinginkan.
.box{
font-family
:
'Kanit'
,
sans-serif
;
text-align
:
center
;
border
:
10px
solid
#fff
;
box-shadow
:
1px
1px
2px
#e6e6e6
;
overflow
:
hidden
;
position
:
relative
;
}
.box:hover{
box-shadow
:
13px
13px
15px
rgba(
0
,
0
,
0
,
0.3
); }
.box:before{
content
:
""
;
background
: linear-gradient(to
left
top
,
#11998e
,
#38ef7d
);
height
:
100%
;
width
:
100%
;
opacity
:
0
;
position
:
absolute
;
left
:
0
;
top
:
0
;
transition
:
all
0.4
s linear;
}
.box:hover:before{
opacity
:
1
; }
.box img{
width
:
100%
;
height
:
auto
;
transition
:
all
0.4
s linear;
}
.box:hover img{
opacity
:
0
;
transform
:
scale
(
3
);
}
.box .box-content{
color
:
#fff
;
width
:
100%
;
transform
:
translateY
(
-50%
)
scale
(
0
);
position
:
absolute
;
top
:
50%
;
left
:
0
;
transition
:
all
0.4
s linear;
}
.box:hover .box-content{
transform
:
translateY
(
-50%
)
scale
(
1
); }
.box .title{
font-size
:
25px
;
font-weight
:
600
;
letter-spacing
:
1px
;
text-transform
:
uppercase
;
margin
:
0
;
}
.box .post{
font-size
:
16px
;
text-transform
:
capitalize
;
}
.box .
icon
{
padding
:
0
;
margin
:
0
;
list-style
:
none
;
position
:
absolute
;
right
:
8px
;
bottom
:
10px
;
}
.box .
icon
li{
display
:
inline-block
;
margin
:
0
1px
;
opacity
:
0
;
transform
:
scale
(
1.3
);
transition
:
all
0.3
s ease
0.4
s;
}
.box:hover .
icon
li{
opacity
:
1
;
transform
:
scale
(
1
);
}
.box:hover .
icon
li:nth-child(
2
){
transition
:
all
0.3
s ease
0.2
s; }
.box .
icon
li a{
color
:
#11998e
;
background
:
#fff
;
font-size
:
16px
;
line-height
:
33px
;
height
:
33px
;
width
:
33px
;
border-radius
:
50%
;
display
:
block
;
transition
:
all
0.5
s ease;
}
.box .
icon
li a:hover{
color
:
#fff
;
background-color
:
#11998e
;
box-shadow
:
0
0
5px
#000
;
}
@media only
screen
and (
max-width
:
990px
){
.box {
margin
:
0
0
30px
; }
}
Source Code Lengkapnya
<html>
<style>
.box{
font-family: ‘Kanit’, sans-serif;
text-align: center;
border: 10px solid #fff;
box-shadow: 1px 1px 2px #e6e6e6;
overflow: hidden;
position: relative;
}
.box:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
.box:before{
content: “”;
background: linear-gradient(to left top,#11998e,#38ef7d);
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: all 0.4s linear;
}
.box:hover:before{ opacity: 1; }
.box img{
width: 100%;
height: auto;
transition: all 0.4s linear;
}
.box:hover img{
opacity: 0;
transform: scale(3);
}
.box .box-content{
color: #fff;
width: 100%;
transform: translateY(-50%) scale(0);
position: absolute;
top: 50%;
left: 0;
transition: all 0.4s linear;
}
.box:hover .box-content{ transform: translateY(-50%) scale(1); }
.box .title{
font-size: 25px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.box .post{
font-size: 16px;
text-transform: capitalize;
}
.box .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
right: 8px;
bottom: 10px;
}
.box .icon li{
display: inline-block;
margin: 0 1px;
opacity: 0;
transform: scale(1.3);
transition: all 0.3s ease 0.4s;
}
.box:hover .icon li{
opacity: 1;
transform: scale(1);
}
.box:hover .icon li:nth-child(2){ transition: all 0.3s ease 0.2s; }
.box .icon li a{
color: #11998e;
background: #fff;
font-size: 16px;
line-height: 33px;
height: 33px;
width: 33px;
border-radius: 50%;
display: block;
transition: all 0.5s ease;
}
.box .icon li a:hover{
color: #fff;
background-color: #11998e;
box-shadow: 0 0 5px #000;
}
@media only screen and (max-width:990px){
.box { margin: 0 0 30px; }
}
</style>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-dIPSN5LDAhQ/XoQHrzDLI6I/AAAAAAAAJsc/gFD8Pw-kIFUTzSpfEirlePnVwpfFzLjagCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMemembuat%2BEfek%2BAnimasi%2BHue%2BBall%2BBerbagai%2BWarna.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Designer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-V0WYwuqmsYE/XoM3fVlEwCI/AAAAAAAAJsM/PVRpq4PsADwd747gKqYnHPDkXVhXjjD7gCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMembuat%2BBola%2BApi%2BLuncur.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Developer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.box{
font-family: ‘Kanit’, sans-serif;
text-align: center;
border: 10px solid #fff;
box-shadow: 1px 1px 2px #e6e6e6;
overflow: hidden;
position: relative;
}
.box:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
.box:before{
content: “”;
background: linear-gradient(to left top,#11998e,#38ef7d);
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: all 0.4s linear;
}
.box:hover:before{ opacity: 1; }
.box img{
width: 100%;
height: auto;
transition: all 0.4s linear;
}
.box:hover img{
opacity: 0;
transform: scale(3);
}
.box .box-content{
color: #fff;
width: 100%;
transform: translateY(-50%) scale(0);
position: absolute;
top: 50%;
left: 0;
transition: all 0.4s linear;
}
.box:hover .box-content{ transform: translateY(-50%) scale(1); }
.box .title{
font-size: 25px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.box .post{
font-size: 16px;
text-transform: capitalize;
}
.box .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
right: 8px;
bottom: 10px;
}
.box .icon li{
display: inline-block;
margin: 0 1px;
opacity: 0;
transform: scale(1.3);
transition: all 0.3s ease 0.4s;
}
.box:hover .icon li{
opacity: 1;
transform: scale(1);
}
.box:hover .icon li:nth-child(2){ transition: all 0.3s ease 0.2s; }
.box .icon li a{
color: #11998e;
background: #fff;
font-size: 16px;
line-height: 33px;
height: 33px;
width: 33px;
border-radius: 50%;
display: block;
transition: all 0.5s ease;
}
.box .icon li a:hover{
color: #fff;
background-color: #11998e;
box-shadow: 0 0 5px #000;
}
@media only screen and (max-width:990px){
.box { margin: 0 0 30px; }
}
</style>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-dIPSN5LDAhQ/XoQHrzDLI6I/AAAAAAAAJsc/gFD8Pw-kIFUTzSpfEirlePnVwpfFzLjagCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMemembuat%2BEfek%2BAnimasi%2BHue%2BBall%2BBerbagai%2BWarna.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Designer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-V0WYwuqmsYE/XoM3fVlEwCI/AAAAAAAAJsM/PVRpq4PsADwd747gKqYnHPDkXVhXjjD7gCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMembuat%2BBola%2BApi%2BLuncur.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Developer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Leave a Reply