* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.HoverDiv {
    position: relative;
    overflow: hidden;
    /* border:1px solid black; */
    /* width:au;
    margin: 10px; */
}

.HoverDiv,
.HoverDiv img {
    max-width: 100%;
    text-align: center;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.HoverDiv:hover h1,
.HoverDiv:hover img {
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}


/* h1 {
    margin: 8px 54px;
    display:inline-block;
    position:relative;
    z-index:1;
    padding:10px 50px;
    color:red;
    border: 1px solid #ccc;
    background: #fff;
  }
  
  h1:before {
    content:'';
    width:100%; height:100%;
    position:absolute;
    top:-1px; left:0;
    background:red;
    z-index:-1;
    border: 1px solid #ccc;
    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    background: #fff;
  } */

.img1 {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.img1:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}