Jinsi ya Kutengeneza Hover Effects za Images na Cards
Jifunze jinsi ya kuongeza hover effects kwa images na cards kwenye website yako. Hii inafanya elements za website yako kuvutia, interactive, na zinazoonesha feedback kwa mtumiaji unapozionyesha au kubonyeza.
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effects za Images na Cards</title>
<style>
.card {
width: 250px;
height: 350px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
transition: transform 0.4s, box-shadow 0.4s;
margin: 20px;
display: inline-block;
}
.card img {
width: 100%;
height: 70%;
object-fit: cover;
transition: transform 0.4s;
}
.card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.card:hover img {
transform: scale(1.1);
}
.card-content {
padding: 15px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/250x250.png?text=Image" alt="Sample Image">
<div class="card-content">
<h3>Title ya Card</h3>
<p>Maelezo mafupi ya card.</p>
</div>
</div>
</body>
</html>
Maelezo ya Code:
.card:hover inasogeza card kidogo na kuongeza ukubwa (scale) pamoja na shadow.
.card img:hover inapanua picha ndani ya card, ikionyesha animation ya smooth na kuvutia.
transition inahakikisha animation ni smooth na interactive.
Unaweza kubadilisha ukubwa, rangi, au shadow kwa taste yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effects za Images na Cards</title>
<style>
.card {
width: 250px;
height: 350px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
transition: transform 0.4s, box-shadow 0.4s;
margin: 20px;
display: inline-block;
}
.card img {
width: 100%;
height: 70%;
object-fit: cover;
transition: transform 0.4s;
}
.card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.card:hover img {
transform: scale(1.1);
}
.card-content {
padding: 15px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/250x250.png?text=Image" alt="Sample Image">
<div class="card-content">
<h3>Title ya Card</h3>
<p>Maelezo mafupi ya card.</p>
</div>
</div>
</body>
</html>
Maelezo ya Code:
.card:hover inasogeza card kidogo na kuongeza ukubwa (scale) pamoja na shadow.
.card img:hover inapanua picha ndani ya card, ikionyesha animation ya smooth na kuvutia.
transition inahakikisha animation ni smooth na interactive.
Unaweza kubadilisha ukubwa, rangi, au shadow kwa taste yako.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509