- <div class="block-wrapper">
- <img src="https://cdn.pixabay.com/photo/2017/09/09/18/25/living-room-2732939_960_720.jpg">
- <div class="overlay">
- <div class="content">
- <h1>Stay at home</h1>
- <p>WHO is providing advice to help you and your family be healthy at home, with tips on staying physically active, looking after our mental health, quitting tobacco and healthy parenting.</p>
- </div>
- </div>
- </div>
- body{
- font-family: 'Lato';
- color: #fff
- }
- .block-wrapper{
- position:relative;
- max-width: 1100px;
- width: 100%;
- border-radius: 10px;
- margin: auto;
- overflow:hidden;
- }
- .content{
- font-size: 20px;
- position:absolute;
- top: 50%;
- left: 50%;
- width: 80%;
- text-align:center;
- transform:translate(-50%, -50%)
- }
- .overlay{
- position:absolute;
- bottom: 0;
- left: 0;
- right: 0;
- width:100%;
- height: 100%;
- background-color: rgba(255, 255, 255, 0.7);
- transform: scale(0);
- transition: .4s ease
- }
- .block-wrapper:hover .overlay{
- transform: scale(1)
- }
- img{
- display:block;
- width: 100%;
- height:auto
- }
- h1{
- font-family: 'Cookie';
- font-size: 100px;
- text-shadow: 0 0 15px #3c3c3c;
- margin-bottom: 25px
- }
- p{
- text-shadow: 0 0 10px #000;
- font-size: 24px;
- }
