Difference between revisions of "Team:ICT-Mumbai/Team"
Revathireddy (Talk | contribs) |
Revathireddy (Talk | contribs) |
||
| Line 50: | Line 50: | ||
} | } | ||
| + | .image { | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | .overlay { | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | background-color: #008CBA; | ||
| + | overflow: hidden; | ||
| + | width: 100%; | ||
| + | height: 0; | ||
| + | transition: .5s ease; | ||
| + | } | ||
| + | |||
| + | .container:hover .overlay { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .text { | ||
| + | white-space: nowrap; | ||
| + | color: white; | ||
| + | font-size: 20px; | ||
| + | position: absolute; | ||
| + | overflow: hidden; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | transform: translate(-50%, -50%); | ||
| + | -ms-transform: translate(-50%, -50%); | ||
| + | } | ||
</style> | </style> | ||
| Line 122: | Line 155: | ||
<div class="w3-display-middle" style="white-space:nowrap;"> | <div class="w3-display-middle" style="white-space:nowrap;"> | ||
<span class="w3-center w3-opacity-max w3-padding-large w3-white w3-xxxlarge w3-wide w3-animate-fading"> Team ICT-Mumbai<span class="w3-hide-small"> | <span class="w3-center w3-opacity-max w3-padding-large w3-white w3-xxxlarge w3-wide w3-animate-fading"> Team ICT-Mumbai<span class="w3-hide-small"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <h2>Slide in Overlay from the Bottom</h2> | ||
| + | <p>Hover over the image to see the effect.</p> | ||
| + | |||
| + | <div class="container"> | ||
| + | <img src="img_avatar.png" alt="Avatar" class="image"> | ||
| + | <div class="overlay"> | ||
| + | <div class="text">Hello World</div> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 14:17, 31 October 2017
