"എൻ.എസ്സ്. എസ്സ്.എച്ച്.എസ്സ്.എസ്സ്. കിടങ്ങൂർ/ഹയർസെക്കന്ററി" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
എൻ.എസ്സ്. എസ്സ്.എച്ച്.എസ്സ്.എസ്സ്. കിടങ്ങൂർ/ഹയർസെക്കന്ററി (മൂലരൂപം കാണുക)
17:30, 30 ജനുവരി 2022-നു നിലവിലുണ്ടായിരുന്ന രൂപം
, 30 ജനുവരി 2022തിരുത്തലിനു സംഗ്രഹമില്ല
No edit summary |
No edit summary |
||
| വരി 4: | വരി 4: | ||
=== പ്രിൻസിപ്പൽ === | === പ്രിൻസിപ്പൽ === | ||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<style> | |||
.container { | |||
position: relative; | |||
width: 50%; | |||
} | |||
.image { | |||
opacity: 1; | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
transition: .5s ease; | |||
backface-visibility: hidden; | |||
} | |||
.middle { | |||
transition: .5s ease; | |||
opacity: 0; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
-ms-transform: translate(-50%, -50%); | |||
text-align: center; | |||
} | |||
.container:hover .image { | |||
opacity: 0.3; | |||
} | |||
.container:hover .middle { | |||
opacity: 1; | |||
} | |||
.text { | |||
background-color: #04AA6D; | |||
color: white; | |||
font-size: 16px; | |||
padding: 16px 32px; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h2>Opacity with Box</h2> | |||
<p>Hover over the image to see the effect.</p> | |||
<div class="container"> | |||
<img src="https://schoolwiki.in/images/thumb/a/a4/D49WhatsApp_Image_2022-01-28_at_12.19.06_PM.jpeg/300px-D49WhatsApp_Image_2022-01-28_at_12.19.06_PM.jpeg" alt="Avatar" class="image" style="width:100%"> | |||
<div class="middle"> | |||
<div class="text">മിനി. പി</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
[[പ്രമാണം:D49WhatsApp Image 2022-01-28 at 12.19.06 PM.jpeg|ചട്ടരഹിതം|300x300ബിന്ദു]] '''മിനി. പി''' | [[പ്രമാണം:D49WhatsApp Image 2022-01-28 at 12.19.06 PM.jpeg|ചട്ടരഹിതം|300x300ബിന്ദു]] '''മിനി. പി''' | ||