<div id="div1">1r</div>

<div id="div2">2</div>
<div id="div3">3</div>

body{ background-color: #2f4f4f;}

*{ margin:0px; padding:0px;}

div {
width: 400px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
opacity:0.7;

h1{transition:3s;}

#div1:hover{width:90%; transition:4s; background-color:lightgray; padding:}

#div2:hover{width:69%; transition:3s; background-color:blue;}
#div3:hover{width:79%; transition:4s; background-color:black; color:#f2f2f2;}