|
|
| Line 10: |
Line 10: |
| | <img class="img" src="https://c1.staticflickr.com/4/3094/2562106102_0c96e6cfd3_b.jpg"> | | <img class="img" src="https://c1.staticflickr.com/4/3094/2562106102_0c96e6cfd3_b.jpg"> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | .container {
| |
| − | position: relative;
| |
| − | width: 30%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .image {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | .overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | opacity: 0;
| |
| − | transition: .5s ease;
| |
| − | background-color: #7D5E7F;
| |
| − | }
| |
| − |
| |
| − | .container:hover .overlay {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .text {
| |
| − | color: white;
| |
| − | font-size: 20px;
| |
| − | position: absolute;
| |
| − | top: 25%;
| |
| − | left: 25%;
| |
| − | transform: translate(-25%, -25%);
| |
| − | -ms-transform: translate(-25%, -25%);
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <body>
| |
| − | <br>
| |
| − | </br>
| |
| − | <div class="container">
| |
| − | <img src="http://azuarondesign.com/images/happy-stick-figure-cliparts-10.jpg" alt="Avatar" class="image">
| |
| − | <div class="overlay">
| |
| − | <div class="text">This is Bob, he is an expert on stuff and likes to do other stuff in his free time</div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| | | | |
| − |
| |
| − |
| |
| − | </body>
| |
| | | | |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
