<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
position: absolute;
height: 250px;
width: 400px;
background-color: #7d807e;
}
.box1 {
color: #fff;
padding-top: 60px;
padding-left: 50px;
font-size: 50px;
font-weight: bold;
}
.box2 {
padding-left: 50px;
}
.box1:hover {
z-index: -1;
opacity: 0.5;
font-size: 30px;
text-align: center;
transform-style: all;
transition-duration: 2s;
}
.box2:hover {
z-index: -1;
opacity: 0.3;
font-size: 40px;
text-align: center;
transform-style: all;
transition-duration: 2s;