CSS trick kali ini adalah membuat sebuah gambar hover yang mana saat terjadinya hover tersebut akan memunculkan sebuah kalimat/link.
Css trick ini sangat menarik untuk dicoba.
Hover image ini tidak menggunakan Javascript pure hanya CSS yang digunakan.
Berikut source code dan juga demonya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Effect Image</title>
<style type="text/css" media="screen">
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
html,body { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
/* Css Hover Content */
body{background: black}
.ken-view { width: 300px; height: 200px; margin: 10px; float: left; border: 1px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; }
.ken-view .ken-mask,.ken-view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; }
.ken-view img { display: block; width: 100%; height: 100%; position: relative; }
.ken-view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(66, 0, 0, 0.8); margin: 20px 0 0 0; }
.ken-view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; }
.ken-view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; }
.ken-view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; }
.ken-view-first img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.ken-view-first .ken-mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(29,0,125, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.ken-view-first h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);
opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.ken-view-first p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.ken-view-first:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }
.ken-view-first a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out }
.ken-view-first:hover .ken-mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
.ken-view-first:hover h2, .ken-view-first:hover p, .ken-view-first:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.ken-view-first:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; }
.ken-view-first:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
</style>
</head>
<body>
<div class="main">
<div class="ken-view ken-view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGi_NA3aDA-Hdm-9e368tIqlXwMwjl71QIWQeZHIyVgbiS301f4Ch_dzs6I_x3lZIxkhigN4O1MmwRH6xZFszAFYjqwzs2Z5iRAAI0KXCWSdAzufCbPg0it40Jm9l5MDZd3kjQxtNfXfx3/s1600/gambar1.png" />
<div class="ken-mask">
<h2>Hover</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="ken-view ken-view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGi_NA3aDA-Hdm-9e368tIqlXwMwjl71QIWQeZHIyVgbiS301f4Ch_dzs6I_x3lZIxkhigN4O1MmwRH6xZFszAFYjqwzs2Z5iRAAI0KXCWSdAzufCbPg0it40Jm9l5MDZd3kjQxtNfXfx3/s1600/gambar1.png" />
<div class="ken-mask">
<h2>Hover</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="ken-view ken-view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGi_NA3aDA-Hdm-9e368tIqlXwMwjl71QIWQeZHIyVgbiS301f4Ch_dzs6I_x3lZIxkhigN4O1MmwRH6xZFszAFYjqwzs2Z5iRAAI0KXCWSdAzufCbPg0it40Jm9l5MDZd3kjQxtNfXfx3/s1600/gambar1.png" />
<div class="ken-mask">
<h2>Hover</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="ken-view ken-view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGi_NA3aDA-Hdm-9e368tIqlXwMwjl71QIWQeZHIyVgbiS301f4Ch_dzs6I_x3lZIxkhigN4O1MmwRH6xZFszAFYjqwzs2Z5iRAAI0KXCWSdAzufCbPg0it40Jm9l5MDZd3kjQxtNfXfx3/s1600/gambar1.png" />
<div class="ken-mask">
<h2>Hover</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</body>
</html>
Catatan: Ganti gambar dengan link gambar kalianSilahkan copy dan paste didalam notepad anda atau cobalah link demo dibawah.
Sekian tutorial membuat image hover dengan css
Demo