|
|
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> |