|
|
വരി 4: |
വരി 4: |
|
| |
|
| === പ്രിൻസിപ്പൽ === | | === പ്രിൻസിപ്പൽ === |
| <!DOCTYPE html> | | <div class="container",class="image" style="width:100%"> |
| <html>
| | [[പ്രമാണം:D49WhatsApp Image 2022-01-28 at 12.19.06 PM.jpeg|ചട്ടരഹിതം|300x300ബിന്ദു]] '''മിനി. പി''' |
| <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> | | </div> |
|
| |
| </body>
| |
| </html>
| |
|
| |
| [[പ്രമാണം:D49WhatsApp Image 2022-01-28 at 12.19.06 PM.jpeg|ചട്ടരഹിതം|300x300ബിന്ദു]] '''മിനി. പി'''
| |
|
| |
| === അദ്ധ്യാപകർ === | | === അദ്ധ്യാപകർ === |
| <gallery> | | <gallery> |